﻿<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=utf-8">

<style> 
h1,h2,h3,h4{
font-family:"黑体";

}
        P {
	TEXT-JUSTIFY: inter-ideograph; FONT-SIZE: 15pt;
        TEXT-INDENT:
        2em;
            LINE-HEIGHT: 160%;
            FONT-FAMILY: '楷体_GB2312';
			font-family: HanWangHeiLight,"楷体_GB2312", "仿宋_GB2312"
            TEXT-ALIGN: justify
            } LI
            { FONT-SIZE:
            14pt; MARGIN-LEFT:
            50px; FONT-FAMILY:
        '楷体_GB2312'
        }
        
        H1 {
        TEXT-ALIGN: center;
		font-size:55px;
		margin:140px;
        }
        H2
        {
            TEXT-ALIGN:center;
			font-size:35px;
			margin:70px;
        }
		h3{
		font-size:25px;
		font-weight:normal;
		}
            PRE
        {
        MARGIN-LEFT:
            4em;
            LINE-HEIGHT: 110%
        }
		pre{
		font-size:11.5pt;}
    </style>
</HEAD>
<BODY>
<h1>Ext Core手冊<img src="markup.gif" width="366" height="61"><br><font size="3" style="font-family:宋體">2009.4.5-5.3</font></h1>
	

    <p>&nbsp;</p>
    <h2>
        Ext Core概述</h2>
    <h3>
        簡介</h3>
    <p>
        Ext Core是一款具有多項功能的輕型JavaScript庫，基于MIT許可為大家服務。在Ext Core中有許多激賞的功能，在倡導快速Web開發的同時也本着高質量、可伸縮性的代碼的指導思想進行着。Core庫對DOM操作、Ajax、事件、動畫、模板、00機制等的任務都有相應的支持。Core庫基于MIT方式發布，無論是一般的動態頁面和簡單的應用程序都可選擇使用。</p>
    <h3>
        下載
    </h3>
    <p>
        可在<a href="http://extjs.com/products/extcore/download.php">本頁面</a>下載，也可以到<a 
            href="http://extjs.com/products/extcore/">Ext Core主頁面</a>查找最新的版本來下載。</p>
    <h3>
        引入Ext Core</h3>
    <p>
        送到手上的Ext Core有調試的版本和供發布時的產品版本。產品版本已經作壓縮（就是消除空白符、硬回車和注釋）和混淆的處理（所有局部變量重命名為短的名稱，使用YUI
        Compressor）。在開發階段，你應使用的是-debug版本，這樣才會看到未混淆過的錯誤信息。</p>
    <p>
                要引入Ext Core的開發版本，這樣引入JavaScript文件就可以了：</p>
    <pre>&lt;script src=<span class="string">"ext-core-debug.js"</span>&gt;&lt;/script&gt;</pre>
   
    <p>
                要引入產品版本（壓縮并且gzipped后25kb），只需要省略掉“-debug”：</p>
        <pre>&lt;script src=<span class="string">"ext-core.js"</span>&gt;&lt;/script&gt;</pre>
    <p>
        完事！Ext Core沒有相關的CSS文件。</p>
    <h3>
        最簡單的例子</h3>
    <p>
        完成Ext Core的加載之后，拿下面的代碼測試一下是否正確加載了：</p>
        
<pre>Ext.onReady(function() {
    Ext.DomHelper.append(document.body, {tag: 'p', cls: 'some-class'});
    Ext.select('p.some-class').update('Ext Core successfully injected');
});</pre>
     <h3>
        關于</h3>
    <p>
        本手冊的作者是Tommy Maintz、Aaron Conran、James Donaghue、Jamie Avins與Evan Trimboli。譯者根據基于<a href="http://www.gnu.org/copyleft/fdl.html" target="_blank">GNU Free Documentation License</a>許可的<a href="http://extjs.com/products/extcore/manual/" target="_blank">原版</a>于2009.4.5初次釋放版本來翻譯，分設有簡體中文和繁體中文（正體中文，格式是PDF）兩種版本。維護以上兩種中文的翻譯版本的是Ext中文站（ajaxjs.com），譯者主要是frank。文中許多部分取材于《<a href="http://www.ajaxjs.com/docs" target="_blank">Ext2.x中文文檔</a>》。鉴于《文檔》是frank與南宮小駿等諸多Ext愛好者之合力，特此說明。</p>       
    <h2>
        元素（Element）</h2>
    <h3>
        獲取元素（Getting Elements）</h3>
    <p>
        一份HTML文檔通常由大量的裝飾元素（markup）所組成。每當瀏覽器加載當前的html文檔，html文檔其中的每一個標簽都被翻譯為HTMLElement以搆建裝飾樹的文件對象模型（<a
            href="https://developer.mozilla.org/En/DOM">Document Object Model</a>，DOM）。你可以在瀏覽器的全局空間中找到一個稱為document的變量，那個document就是DOM樹的對象。document記憶了當頁面加載完畢后而形成的每一份裝飾元素引用。</p>
    <p>
        document對象有一個重要的方法<a href="https://developer.mozilla.org/en/DOM/document.getElementById ">getElementById</a>，允許在每個瀏覽中獲取其中的<a 
            href="https://developer.mozilla.org/en/DOM/element">HTMLElement</a>對象。然而，直接操縱DOM來說還有許多要注意的問題。Ext Core實現了Ext.Element類來封裝（Wrap 
        around）各瀏覽器不同HTMLElement的對象。</p>
    <p>
        Ext.Element占Ext Core庫的篇幅很大，其中方法就占據了大部份。因此我們將這些方法可分為下面几類：</p>
    <ul>
        <li>CSS與樣式（如setStyle、addClass）
      <li>DOM查詢或遍曆（如query、select、findParent）
      <li>DOM操控（如createChild、remove）
      <li>方位、尺寸（如getHeight、getWidth）</li>
    </ul>
    <p>
        你可以使用Ext.get方法創建Ext.Element的實例，達到封裝普通的HTMLElement之目的。例如你有已一個id名為“myElementId”的元素，便可以這樣獲取：</p>
    <pre>var el = Ext.get('myElementId');</pre>
    <p>
        用<a href="http://www.getfirebug.com/">Firebug</a>執行以下代碼后，觀察Ext.Element身上的方法有哪些。有一點要注意的就是，你正在觀察的是普通JavaScript對象，我意思是說無所謂的public與private的方法，它們均有在此列出，若有疑問可參考API文檔。</p>
    <pre>
var el = Ext.get('myElementId');
console.dir(el);
</pre>
    <div align="center"><img src="element-firebug-dir-sm.png" width="570" height="193" >
</div>
       
    <p>
        <a href="http://getfirebug.com/console.html">console.dir</a>命令由Firebug提供，執行該可方便地列出某個對象身上有什么成員，這都是例于開發者閱讀的形式顯示的。你換可以通過折疊某個子對象以了解其牽連的屬性。如圖，屬性顯示是黑色的，方法/函數是綠色的，搆造器（constructors）或類（class）就是紅色的。現在我對id為myElementId的段落元素進行操作:</p>
    <code>
        <pre>
var el = Ext.get('myElementId');
el.addClass('error');
</pre>
    </code>
    <p>
        這段代碼作用后段落的字體顏色就變為紅色，頁面的CSS規則有error的樣式類，屬于error類的元素就會有紅色效果：</p>
    <pre>
.error {
    color: red;
}</pre>
    <p>
        下一小節（CSS類與樣式）會簡介關于處理元素的不同方式。</p>
    <h3>
        理解Flyweight</h3>
    <p>
        <a href="http://en.wikipedia.org/wiki/Flyweight_pattern">享元模式（Flyweight Design 
        Pattern）</a>是一種節省內存的模式，該模式的大概原理是建立單個全體對象然后不斷反復使用它。
    </p>
    <p>
        Ext在啟動的時候就創建了一個全局的Ext.Element對象專為Flyweight的設計服務。這個全局的Flyweight實例可以為Dom里面任何一個節點保存引用。要訪問這種Flyweight的對象請使用Ext.fly方法。Ext新手可能會因Ext.get()與Ext.fly()兩者之間的用法而犯湖塗。</p>
    <p>
        如果感覺這個Ext.Element元素是一直下去多次引用的，那么可以使用Ext.get方法；如果在一段時間內不需要存儲元素的引用，那么就使整個庫部共享的對象Flyweight的Ext.Element對象。通過Flyweight訪問元素，用Ext.fly(/*元素id*/)的方法。</p>
    <p>
        再如上面那段落，我們撤銷樣式。</p>
    <pre>
Ext.fly('myElementId').removeClass('error');
</pre>
    <p>
        當執行這代碼，Ext就復用現有的享元對象，不一定要建立一個全新Ext.Element對象。fly方法較適合單行的、一次性的原子操作（atomic 
        operation），就算你想將某個元素存儲起來也是無效的，因為其它代碼很有機會改變對象。例如，我們看看下面的代碼：
    </p>
    <pre>
var el = Ext.fly('foo');
Ext.fly('bar').frame();
el.addClass('error');
</pre>
    <p>
        frame()是Ext.Element包中的動畫方法，產生高亮的效果，你可以估計一下，有什么現象出現？
    </p>
    <p>
        答案是id為bar的那個元素會產生frame效果隨后立即應用上error的CSS樣式效果，那foo 
        id的元素可什么事情都沒有發生，這是由于指向Flyweight對象的el引用已經被產生過frame效果的所使用。
    </p>
    <p>
        el就是bar元素，這是關于Flyweight享元用法的重要內容，如果你想搞清楚Ext.fly方法的用途適宜再看看這部份的內容。</p>
    <b>Ext.get</b>
    <p>
        Ext.get()可接收這几種類型的參數，如HTMLElement，Ext.Element、字符型，返回的新實例。以下三種類型如下例：</p>
    <pre>
var el1 = Ext.get('elId'); // 接收元素id
var el2 = Ext.get(el1); // 接受Ext.Element
var el3 = Ext.get(el1.dom); //接受HTMLElement
</pre>
    <b>Ext.fly</b>
    <p>
        Ext.fly在參數方面與Ext.get的完全相同，但其內置控制返回Ext.Element的方法就完全不同，Ext.fly<b>從不</b>保存享元對象的引用，每次調用方法都返回獨立的享元對象。其實區別在于“緩存”中，因為緩存的緣故，Ext.get需要為每個元素保存其引用，就形成了緩存，如果有相同的調用就返回，但Ext.fly沒有所謂的緩存機制，得到什么就返回什么，不是多次使用的情況下“一次性地”使用該元素就應該使用Ext.fly（例如執行單項的任務）。</p>
    <p>
        使用Ext.fly的例子：</p>
    <pre>// 引用該元素一次即可，搞掂了就完工
Ext.fly('elId').hide();
</pre>
    <b>Ext.getDom</b>
    <p>
        送入String (id)、dom節點和Ext.Element的參數，Ext.getDom只會返回一個普通的dom節點。如下例：</p>
    <pre>
// 依據id來查dom節點
var elDom = Ext.getDom('elId'); 
// 依據dom節點來查dom節點
var elDom1 = Ext.getDom(elDom); 

// 如果我們不了解Ext.Element是什么直接用Ext.getDom返回舊的dom節點好了
function(el){
	var dom = Ext.getDom(el);
	 // 接下來干些事情……
}
</pre>
<h3>CSS樣式</h3>
	<p>通過學習markup裝飾部分，我們已經曉得，裝飾與document的緊密聯系下如何透過Ext Core較簡便地取得數據。但進行document的布局又如何編排呢？是不是有一種方法可以控制布局也可以控制document的樣式呢？答案便是用<a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets (CSS)</a>處理。CSS正是用來頁面可視化信息和布局的語言。Ext Core在方面真的是讓我們用戶感覺好使好用，易如反掌，——直接修改它就行了。</p>
	<pre>&lt;<span class="keyword">style</span> type=<span class="string">"text/css"</span>&gt;

myCls {
	color: #F00;
}
&lt;/<span class="keyword">style</span>&gt;

...

&lt;<span class="keyword">div</span> type=<span class="string">"myCls"</span>&gt;您好！&lt;/<span class="keyword">div</span>&gt;</pre>
<p>
	上一例中我們賦予div元素“您好”的文本和讓其顏色為紅色（#F00）。</p>
    <p>我們已經曉得Firebug，可以為我們帶來頁面開發上的種種便利。凡頁面中的任意一元素上面右擊，選擇“Inspect Element”（檢測元素），彈出Firebug可以觀察到dom樹中真實情況，該元素是定義在哪里的。Dom樹右邊的面板就是對應該元素身上的樣式。</p>
	<div align=center>
	<img src="firebug-style-sm.png" width="570" height="220">
	</div>
	
	<p>
如果你未曾熟悉Firebug的話，暫時放下這塊建議先學習一下它。它仿佛就是Web開發的高級示波器！心血來潮地修改站點的樣式抑或是調試站點的樣式，“Inspect Element”功能都貢獻殊大。回到Ext中，我們看看Ext Core中有哪些方法是為修改CSS所服務的。</p>
	
	<ul>
		<li><b>addClass</b>
			<div>
                輕松地為一個元素添加樣式：<pre>Ext.fly(<span class="string">'elId'</span>).addClass(<span class="string">'myCls'); <span class="comment">// 加入元素的'myCls'的樣式</span></span></pre>
			</div>
		<li><b>radioClass</b>
			<div>
                添加一個或多個className到這個元素，并移除其所有側邊（siblings）節點上的同名樣式。
<pre><span class="comment">//為元素添加'myCls'在所有側邊元素上刪除'myCls'樣式</span>

<span class="comment">// all sibilings.</span>
Ext.fly(<span class="string">'elId'</span>).radioClass(<span class="string">'myCls'</span>);</pre>
			</div>
		<li><b>removeClass</b>
			<div>

                移除元素身上一個或多個的CSS類。
<pre>Ext.fly(<span class="string">'elId'</span>).removeClass(<span class="string">'myCls'</span>); <span class="comment">//  移除元素的樣式</span></pre>
			</div>
		<li><b>toggleClass</b>
			<div>

                輪換（Toggles，兩種狀態中轉換到一個狀態）--添加或移除指定的CSS類（如果已經存在的話便刪除，否則就是新增加）。
<pre>Ext.fly(<span class="string">'elId'</span>).toggleClass(<span class="string">'myCls'</span>); <span class="comment">//  加入樣式</span>
Ext.fly(<span class="string">'elId'</span>).toggleClass(<span class="string">'myCls'</span>); <span class="comment">//  移除樣式</span>
Ext.fly(<span class="string">'elId'</span>).toggleClass(<span class="string">'myCls'</span>); <span class="comment">//  再加入樣式</span></pre>

			</div>
		<li><b>hasClass</b>
			<div>
                檢查某個CSS類是否作用于這個元素身上。
<pre>if (Ext.fly(<span class="string">'elId'</span>).hasClass(<span class="string">'myCls'</span>)) {
	<span class="comment">//  是有樣式的……</span>
}</pre>

			</div>
		<li><b>replaceClass</b>
			<div>
                在這個元素身上替換CSS類。
<pre>Ext.fly(<span class="string">'elId'</span>).replaceClass(<span class="string">'myClsA'</span>, <span class="string">'myClsB'</span>);</pre>

			</div>
		<li><b>getStyle</b>
			<div>
                返回該元素的統一化當前樣式和計算樣式。
                  <pre><span class="keyword">var</span> color = Ext.fly(<span class="string">'elId'</span>).getStyle(<span class="string">'color'</span>);
<span class="keyword">var</span> zIndx = Ext.fly(<span class="string">'elId'</span>).getStyle(<span class="string">'z-index'</span>);

<span class="keyword">var</span> fntFmly = Ext.fly(<span class="string">'elId'</span>).getStyle(<span class="string">'font-family'</span>);
<span class="comment">// ... 等等</span></pre>
			</div>
		<li><b>setStyle</b>
			<div>

                設置元素的樣式，也可以用一個對象參數包含多個樣式。
<pre>Ext.fly(<span class="string">'elId'</span>).setStyle(<span class="string">'color'</span>, <span class="string">'#FFFFFF'</span>);
Ext.fly(<span class="string">'elId'</span>).setStyle(<span class="string">'z-index'</span>, 10);
Ext.fly(<span class="string">'elId'</span>).setStyle({
	display : <span class="string">'block'</span>,
	overflow : <span class="string">'hidden'</span>,
	cursor : <span class="string">'pointer'</span>

});
<span class="comment">// 帶有動畫的變換過程</span>
Ext.fly(<span class="string">'elId'</span>).setStyle(<span class="string">'color'</span>, <span class="string">'#FFFFFF'</span>, true);
<span class="comment">// 帶有0.75秒動畫的變換過程</span>
Ext.fly(<span class="string">'elId'</span>).setStyle(<span class="string">'color'</span>, <span class="string">'#FFFFFF'</span>, {duration: .75}); 

<span class="comment">// ... 等等</span></pre>
			</div>
		<li><b>getColor</b>
			<div>
                為指定的CSS屬性返回CSS顏色。RGB、三位數(像#fff)和有效值都被轉換到標准六位十六進制的顏色。
<pre>Ext.fly(<span class="string">'elId'</span>).getColor(<span class="string">'background-color'</span>);
Ext.fly(<span class="string">'elId'</span>).getColor(<span class="string">'color'</span>);
Ext.fly(<span class="string">'elId'</span>).getColor(<span class="string">'border-color'</span>);

<span class="comment">// ... 等等</span></pre>
			</div>
		<li><b>setOpacity</b>
			<div>
                設置元素的透明度。
<pre>Ext.fly(<span class="string">'elId'</span>).setOpacity(.5);
Ext.fly(<span class="string">'elId'</span>).setOpacity(.45, true); <span class="comment">// 動畫</span>

<span class="comment">// 附有半秒的動畫過程</span>
Ext.fly(<span class="string">'elId'</span>).setOpacity(.45, {duration: .5});</pre>
			</div>
		<li><b>clearOpacity</b>
			<div>
                清除這個元素的透明度設置。
<pre>Ext.fly(<span class="string">'elId'</span>).clearOpacity();</pre>

			</div>
		</li>
	</ul>
<div></div>

<div id="dom-traversal" class="sect">
	<h3>Dom游曆</h3>
	<p>
已知某個位置，我們要其附近位置的dom樹中游曆，是一件經常性的任務。Ext Core里面就有這樣跨瀏覽器的方法，允許我們在dom之中穿梭自如。再一次，CSS進入了我們的視野，使得干起復雜的任務時沒那么痛苦。基于CSS3的選擇符（選擇器）在方面也尤其地干練！</p>
	<p>
拿以下的裝飾做示范：</p>
	<pre>&lt;<span class="keyword">style</span> type=<span class="string">"text/css"</span>&gt;

    .red {
        color: #F00;
    }
&lt;<span class="keyword">/style</span>&gt;	
...
&lt;<span class="keyword">div</span> id=<span class="string">'elId'</span>&gt;
    &lt;<span class="keyword">ul</span>&gt;
        &lt;<span class="keyword">li</span>&gt;a-one&lt;/<span class="keyword">li</span>&gt;

        &lt;<span class="keyword">li</span>&gt;a-two&lt;/<span class="keyword">li</span>&gt;
        &lt;<span class="keyword">li</span>&gt;a-three&lt;/<span class="keyword">li</span>&gt;
        &lt;<span class="keyword">li</span>&gt;a-four&lt;/<span class="keyword">li</span>&gt;

    &lt;/<span class="keyword">ul</span>&gt;
    &lt;<span class="keyword">ul</span>&gt;
        &lt;<span class="keyword">li</span>&gt;b-one&lt;/<span class="keyword">li</span>&gt;
        &lt;<span class="keyword">li</span>&gt;b-two&lt;/<span class="keyword">li</span>&gt;

        &lt;<span class="keyword">li</span>&gt;b-three&lt;/<span class="keyword">li</span>&gt;                
    &lt;/<span class="keyword">ul</span>&gt;
&lt;/<span class="keyword">div</span>&gt;</pre>
	<p>
這是一堆列表元素，要讓其中的偶數行變紅色。要如此優雅地實現該功能，Ext不是沒有，鍵入命令如下：</p>
<pre>Ext.fly(<span class="string">'elId'</span>).select(<span class="string">'li:nth-child(2n)'</span>).addClass(<span class="string">'red'</span>);</pre>
<p>
結果如下：</p>
<div align=center>
<img src="traversal.png" width="127" height="171" ></div>


	<p>
	我們已見識過游曆DOM方面，依靠Ext Core所帶來的強大威力，——類似還有更多的，看看：</p>
	<ul>
		<li><b>is</b>
			<div>
                測試當前元素是否與傳入的選擇符相符一致。
                  <pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId'</span>);
if (el.is(<span class="string">'p.myCls'</span>)) {
	<span class="comment">// 條件成立</span>

}</pre>
			</div>
		<li><b>findParent</b>
			<div>
                定位于此節點，以此節點為起點，向外圍搜索外層的父節點，搜索條件必須符合并匹配傳入的簡易選擇符。
<pre>Ext.fly(<span class="string">'elId'</span>).findParent(<span class="string">'div'</span>); <span class="comment">// 返回dom節點</span>

Ext.fly(<span class="string">'elId'</span>).findParent(<span class="string">'div'</span>, 4); <span class="comment">// 查找4個節點</span>
Ext.fly(<span class="string">'elId'</span>).findParent(<span class="string">'div'</span>, null, true); <span class="comment">// 返回Ext.Element</span></pre>
			</div>

		<li><b>findParentNode</b>
			<div>
                定位于此節點的“父節點”，以此節點的“父節點”為起點，向外圍搜索外層的“父父”節點，搜索條件必須符合并匹配傳入的簡易選擇符。
<pre>Ext.fly(<span class="string">'elId'</span>).findParentNode(<span class="string">'div'</span>);</pre>
			</div>
		<li><b>up</b>

			<div>
                沿着DOM，向外圍搜索外層的“父父”節點，搜索條件必須符合并匹配傳入的簡易選擇符。
<pre>Ext.fly(<span class="string">'elId'</span>).up(<span class="string">'div'</span>);
Ext.fly(<span class="string">'elId'</span>).up(<span class="string">'div'</span>, 5); <span class="comment">// 限5層的內查找</span></pre>
			</div>

		<li><b>select</b>
			<div>
                傳入一個CSS選擇符的參數，然后依據該CSS選擇符從當前元素下面，形成期待匹配子節點的集合，也就是“選擇”的操作，最后以一個Ext.CompositeElement類型的組合元素的形式返回。如果以Ext.select()調用表示從document可是搜索。<pre><span class="comment">// 返回結果的CompositeElement</span>
Ext.fly(<span class="string">'elId'</span>).select(<span class="string">'div:nth-child(2)'</span>);
<span class="comment">// 返回數組</span>
Ext.fly(<span class="string">'elId'</span>).select(<span class="string">'div:nth-child(2)', true</span>);

<span class="comment">// 整個document都會搜索</span>
Ext.select(<span class="string">'div:nth-child(2)'</span>);</pre>  
			</div>
		<li><b>query</b>
			<div>
進行一次query的查詢，返回DOM 節點組成的數組。可選地第二參數設置為查詢的起點，如不指定則為 document。
  <pre>// 返回dom節點組成的數組
Ext.query('div:nth-child(2)'); </pre>

		  </div>
		<li><b>child</b>
			<div>
基于送入的選擇符，不限定深度進行搜索，符合的話選取單個子節點。
  <pre>Ext.fly(<span class="string">'elId'</span>).child(<span class="string">'p.highlight'</span>);  <span class="comment">// 返回的類型是Ext.Element</span>

Ext.fly(<span class="string">'elId'</span>).child(<span class="string">'p.highlight'</span>, <span class="keyword">true</span>);  <span class="comment">// 返回dom節點</span></pre>
		  </div>
		<li><b>down</b>
			<div>

基于該選擇符，&quot;直接&quot;選取單個子節點。
<pre>Ext.fly(<span class="string">'elId'</span>).down(<span class="string">'span'</span>);  <span class="comment">// 返回的類型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).down(<span class="string">'span'</span>, true);  <span class="comment">// 返回dom節點</span></pre>
			</div>
		<li><b>parent</b>
			<div>
返回當前節點的那個父節點，可選地可送入一個期待的選擇符。
  <pre><span class="comment">// 返回父節點，類型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).parent();  
<span class="comment">// 返回父節點，類型是html dom</span>
Ext.fly(<span class="string">'elId'</span>).parent("", true);

<span class="comment">// 返回父級節點，但一定要是div的，找到就返回，類型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).parent("div");</pre>
		  </div>
		<li><b>next</b>
			<div>
獲取下一個側邊節點，跳過文本節點。可選地可送入一個期待的選擇符。
  <pre><span class="comment">// </span><span class="comment">返回下一個側邊節點，類型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).next();
<span class="comment">// 返回下一個側邊節點，類型是html dom</span>
Ext.fly(<span class="string">'elId'</span>).next("", true);
<span class="comment">// 返回下一個側邊節點，但一定要是div的，找到就返回，類型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).next("div");</pre>
		  </div>

		<li><b>prev</b>
			<div>
獲取上一個側邊節點，跳過文本節點。可選地可送入一個期待的選擇符。
  <pre><span class="comment">// 返回上一個側邊節點，類型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).prev();
<span class="comment">// </span><span class="comment">返回上一個側邊節點，類型是html dom</span>
Ext.fly(<span class="string">'elId'</span>).prev("", true);
<span class="comment">// 返回上一個側邊節點，但一定要是div的，找到就返回，類型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).prev("div");</pre>
		  </div>
		<li><b>first</b>
			<div>
獲取第一個側邊節點，跳過文本節點。可選地可送入一個期待的選擇符。
  <pre><span class="comment">// 返回第一個側邊節點，類型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).first();
<span class="comment">// 返回第一個側邊節點，類型是html dom</span>
Ext.fly(<span class="string">'elId'</span>).first("", true);
<span class="comment">// </span><span class="comment">返回第一個側邊節點，但一定要是div的，找到就返回，類型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).first("div");</pre>
		  </div>
		<li><b>last</b>

			<div>
獲取最后一個側邊節點，跳過文本節點。可選地可送入一個期待的選擇符。
  <pre><span class="comment">// 返回最后一個側邊節點，類型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).last();
<span class="comment">// 返回最后一個側邊節點，類型是html dom</span>
Ext.fly(<span class="string">'elId'</span>).last("", true);
<span class="comment">// 返回最后一個側邊節點，但一定要是div的，找到就返回，類型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).last("div");</pre>

		  </div>
		</li>
	</ul>
</div>
	<h3 class=sect>DOM操控</h3>
	<p class=sect>

	DHTML常見的一項任務就是DOM元素的增、刪、改、查。鑒于不同瀏覽器的差別很大，搞起來會很麻煩，ExtCore就設計了一個抽離不同瀏覽器之間差異的API，并考慮了執行速度方面的優化。我們可以輕松地圍繞DOM樹做增、刪、改、查的任務。先觀察一下這裝飾元素：</p>
<div class=sect>
    <pre>&lt;<span class="keyword">div</span> id=<span class="string">'elId'</span>&gt;
	&lt;<span class="keyword">p</span>&gt;paragraph one&lt;/<span class="keyword">p</span>&gt;
	&lt;<span class="keyword">p</span>&gt;paragraph two&lt;/<span class="keyword">p</span>&gt;

	&lt;<span class="keyword">p</span>&gt;paragraph three&lt;/<span class="keyword">p</span>&gt;
&lt;/<span class="keyword">div</span>&gt;</pre></div>
	
	<p class=sect>

	渲染出來這樣：</p>
<div align="center" class=sect>
	<img src="manip-before.png" width="123" height="118">
	<p>

	這時我們為其加入一個子節點“elId”：</p>
</div>
<div class=sect>
	
	<pre>Ext.fly(<span class="string">'elId'</span>).insertFirst({
	tag: <span class="string">'p'</span>,
	html: <span class="string">'Hi! I am the new first child.'</span>

});</pre>
</div>
	
	<p class=sect>插入后是這樣：</p>

	<div align="center" class=sect>
	<img src="manip-after.png" width="176" height="153" ></div>
<p class=sect>小菜一碟吧！？我們再操練一下Ext Core強大的API功能：</p>
<div class=sect>

<ul>
	<li><b>appendChild</b>

		<div>
			把送入的元素歸為這個元素的子元素。
			<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);
// 用id指定
Ext.fly(<span class="string">'elId'</span>).appendChild(<span class="string">'elId2'</span>);
<span class="comment">// Ext.Element添加</span>
Ext.fly(<span class="string">'elId'</span>).appendChild(el);
<span class="comment">// 選擇符組合地添加</span>
Ext.fly(<span class="string">'elId'</span>).appendChild([<span class="string">'elId2'</span>,<span class="string">'elId3'</span>]);
<span class="comment">// 直接添加dom節點</span>
Ext.fly(<span class="string">'elId'</span>).appendChild(el.dom);

<span class="comment">// 添加CompositeElement，一組的div</span>
Ext.fly(<span class="string">'elId'</span>).appendChild(Ext.select(<span class="string">'div'</span>));  </pre>
		</div>
	<li><b>appendTo</b>
		<div>

			把這個元素添加到送入的元素里面。
			  <pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	
// <span class="string">'elId'</span>添加到<span class="string">'elId2'</span>里面
Ext.fly(<span class="string">'elId'</span>).appendTo(<span class="string">'elId2'</span>); 
Ext.fly(<span class="string">'elId'</span>).appendTo(el);  <span class="comment">// 添加到Ext.Element el</span></pre>

	  </div>
	<li><b>insertBefore</b>
		<div>
			傳入一個元素的參數，將其放置在當前元素之前的位置。
			<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	

<span class="comment">// </span>dom節點在前面插入
Ext.fly(<span class="string">'elId'</span>).insertBefore(<span class="string">'elId2'</span>);
<span class="comment">//</span><span class="comment">Ext.Element el</span>在前面插入
Ext.fly(<span class="string">'elId'</span>).insertBefore(el);</pre>
		</div>
	<li><b>insertAfter</b>

		<div>
			傳入一個元素的參數，將其放置在當前元素之后的位置。
			<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	

<span class="comment">// </span>dom節點在后面插入
Ext.fly(<span class="string">'elId'</span>).insertAfter(<span class="string">'elId2'</span>);
<span class="comment">// Ext.Element el</span>在后面插入

Ext.fly(<span class="string">'elId'</span>).insertAfter(el);</pre>
	  </div>
	<li><b>insertFirst</b>
		<div>
			可以是插入一個元素，也可以是創建一個元素（要創建的話請使用“DomHelper配置項對象”作為參數傳入），總之，這個元素作為當前元素的第一個子元素出現。
			  <pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	


<span class="comment">// 插入的dom節點作為第一個元素</span>
Ext.fly(<span class="string">'elId'</span>).insertFirst(<span class="string">'elId2'</span>);  
<span class="comment">// 插入的Ext.Element作為第一個元素</span>
Ext.fly(<span class="string">'elId'</span>).insertFirst(el);
		
<span class="comment">// 用DomHelper配置項創建新節點，新節點會作為第一個子元素被插入。
</span>Ext.fly(<span class="string">'elId'</span>).insertFirst({
	tag: <span class="string">'p'</span>,
	cls: <span class="string">'myCls'</span>,
	html: <span class="string">'Hi I am the new first child'</span>

});</pre>
		</div>
	<li><b>replace</b>
		<div>
			用于當前這個元素替換傳入的元素。
			<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	

 <span class="comment">// 'elId'去替換'elId2'</span>

Ext.fly(<span class="string">'elId'</span>).replace(<span class="string">'elId2'</span>); 
<span class="comment">// </span><span class="comment"> 'elId'去替換'elId1'</span>
Ext.fly(<span class="string">'elId'</span>).replace(el);</pre>
		</div>
	<li><b>replaceWith</b>

		<div>
			用傳入的元素替換這個元素。參數可以是新元素或是要創建的DomHelper配置項對象。
			<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	

Ext.fly(<span class="string">'elId'</span>).replaceWith(<span class="string">'elId2'</span>);  <span class="comment">// 'elId2'替換掉'elId'.</span>
Ext.fly(<span class="string">'elId'</span>).replaceWith(el);  <span class="comment">// 'elId1'替換掉'elId'</span>

		
<span class="comment">// 用DomHelper配置項創建新節點，并用該節點換掉‘elId’。</span>
Ext.fly(<span class="string">'elId'</span>).replaceWith({
	tag: <span class="string">'p'</span>,
	cls: <span class="string">'myCls'</span>,		
	html: <span class="string">'Hi I have replaced elId'</span>
});</pre>
	  </div>
	</li>	

</ul></div>


<h3>DomHelper配置項</h3>
    <p>在上面的例子中，大家可能就注意到這樣的語法：</p>
    <pre>.insertFirst({
	tag: <span class="string">'p'</span>,
	html: <span class="string">'Hi I am the new first child'</span>
});</pre>

<p>insertFirst方法的那個參數作用是什么呢？參數就是要創建的裝飾元素在DomHelper中是怎么表示的，也就是DomHelper的配置選項，其配置項支持很多的屬性，html片斷也行，至于html屬性就可以是Dom節點的很多屬性了（css class、url、src、id等）。這里是Ext.Element一些的API，直接用來與Ext.DomHelper相交互：</p>
<ul>
	<li><b>createChild</b>

		<div>傳入一個DomHelper配置項對象的參數，將其創建并加入到該元素。
		  <pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId'</span>);
<span class="keyword">var</span> dhConfig = {
	tag: <span class="string">'p'</span>,
	cls: <span class="string">'myCls'</span>,
	html: <span class="string">'Hi I have replaced elId'</span>
};


<span class="comment">// 創建新的節點，放到'elId'里面</span>
el.createChild(dhConfig); 
<span class="comment">// 創建新的節點，居el第一個子元素之前</span>
el.createChild(dhConfig, el.first());</pre>
	  </div>
	<li><b>wrap</b>
		<div>創建一個新的元素，包裹在當前元素外面。
		  <pre>Ext.fly(<span class="string">'elId'</span>).wrap(); <span class="comment">// div包着elId</span>

		
<span class="comment">// 用新建的一個元素來包着elId</span>
Ext.fly(<span class="string">'elId'</span>).wrap({
	tag: <span class="string">'p'</span>,
	cls: <span class="string">'myCls'</span>,		
	html: <span class="string">'Hi I have replaced elId'</span>
});</pre>
	  </div></li>

</ul>

<h3> Html片斷</h3>
<p>
Html片斷，顧名思義，系html裝飾中的某一部分。Exr Core就是以html片斷的形式修改控制dom，換言之，我們關心裝飾片斷即可修改該部分的dom，無須為瀏覽器的實現和性能而煩惱。Ext Core已經做足涵蓋這方面的功夫，閣下所做的只是提供好相關裝飾元素，如：</p>
<pre>&lt;<span class=keyword>div</SPAN> id=<span class=string>'elId'</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;one&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN>&gt;two&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;three&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;four&lt;/<span class=keyword>li</SPAN>&gt;    

&lt;/<span class=keyword>div</SPAN>&gt;</PRE>
<p>你猜Ext Core會怎樣做？</P><pre>Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(<span class=string>'beforeBegin'</SPAN>, <span class=string>'&lt;p&gt;Hi&lt;/p&gt;'</SPAN>)</PRE>
<p>形成裝飾元素如下：</P><pre>&lt;<span class=keyword>p</SPAN>&gt;Hi&lt;/<span class=keyword>p</SPAN>&gt;	
&lt;<span class=keyword>div</SPAN> id=<span class=string>'elId'</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;one&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN>&gt;two&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;three&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;four&lt;/<span class=keyword>li</SPAN>&gt;    

&lt;/<span class=keyword>div</SPAN>&gt;</PRE>
<p>不意外吧？這是因為我們可以自由定位插入的順序。我們指定“beforeBegin”，就是這樣：</P>
<pre>Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(<span class=string>'afterBegin'</SPAN>, <span class=string>'&lt;p&gt;Hi&lt;/p&gt;'</SPAN>)</PRE>
<p>看一看：</P><pre>&lt;<span class=keyword>div</SPAN> id=<span class=string>'elId'</SPAN>&gt;
    &lt;<span class=keyword>p</SPAN>&gt;Hi&lt;/<span class=keyword>p</SPAN>&gt;	
    &lt;<span class=keyword>li</SPAN>&gt;one&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN>&gt;two&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;three&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;four&lt;/<span class=keyword>li</SPAN>&gt;    

&lt;/<span class=keyword>div</SPAN>&gt;</PRE>
<p>現在我們使用“beforeEnd”。 </P><pre>Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(<span class=string>'beforeEnd'</SPAN>, <span class=string>'&lt;p&gt;Hi&lt;/p&gt;'</SPAN>)</PRE>
<p>來看看：</P><pre>&lt;<span class=keyword>div</SPAN> id=<span class=string>'elId'</SPAN>&gt;    
    &lt;<span class=keyword>li</SPAN>&gt;one&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;two&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN>&gt;three&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;four&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>p</SPAN>&gt;Hi&lt;/<span class=keyword>p</SPAN>&gt;	

&lt;/<span class=keyword>div</SPAN>&gt;</PRE>
<p>最后試試“afterEnd”。</P><pre>Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(<span class=string>'beforeEnd'</SPAN>, <span class=string>'&lt;p&gt;Hi&lt;/p&gt;'</SPAN>)</PRE>
<p>看看：</P><pre>&lt;<span class=keyword>div</SPAN> id=<span class=string>'elId'</SPAN>&gt;    
    &lt;<span class=keyword>li</SPAN>&gt;one&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;two&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN>&gt;three&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;four&lt;/<span class=keyword>li</SPAN>&gt;    
&lt;/<span class=keyword>div</SPAN>&gt;
&lt;<span class=keyword>p</SPAN>&gt;Hi&lt;/<span class=keyword>p</SPAN>&gt;</PRE>
<p>處理HTML片斷時下列方法也是有幫助的：</P>
<ul>
  <li><b>insertHtml</B> 
  <div>插入HTML片斷到這個元素。至于要插入的html放在元素的哪里，你可指定beforeBegin, beforeEnd, afterBegin, afterEnd這几種。第二個參數是插入HTML片斷，第三個參數是決定是否返回一個Ext.Element類型的DOM對象。
    <pre>Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(
	<span class=string>'beforeBegin'</SPAN>,
	<span class=string>'&lt;p&gt;&lt;a href="anotherpage.html'&gt;點擊我&lt;/a&gt;&lt;/p&gt;'</SPAN>

); <span class=comment>// 返回dom節點</SPAN>
Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(
	<span class=string>'beforeBegin'</SPAN>,
	<span class=string>'&lt;p&gt;&lt;a href="anotherpage.html'&gt;點擊我&lt;/a&gt;&lt;/p&gt;'</SPAN>,
	<span class=keyword>true</SPAN>

); <span class=comment>// 返回Ext.Element</SPAN></PRE>
  </DIV>
  <li><b>remove</B> 
  <div>從DOM里面移除當前元素，并從緩存中刪除。. 
    <pre>Ext.fly(<span class=string>'elId'</SPAN>).remove(); <span class=comment>// elId在緩存和dom里面都沒有</SPAN></PRE>
  </DIV>
  <li><b>removeNode</B> 
    <div> 移除document的DOM節點。如果是body節點的話會被忽略。
      <pre>Ext.removeNode(node); <span class=comment>// 從dom里面移除(HTMLElement)</SPAN></PRE>
    </DIV></LI></UL>
<h3>Ajax</H3>
<p>Ext Core具備完整的Ajax API。關于本部分的詳細內容會在文章尾部交待清楚不過這里先介紹API中的概貌：</P>
<ul>
  <li><b>load</B> 
    <div>直接訪問Updater的Ext.Updater.update()方法（相同的參數）。參數與Ext.Updater.update()方法的一致。
      <pre>Ext.fly(<span class=string>'elId'</SPAN>).load({url: <span class=string>'serverSide.php'</SPAN>})</PRE></DIV><li><b>getUpdater</B> 
    <div>獲取這個元素的UpdateManager。
      <pre><span class=keyword>var</SPAN> updr = Ext.fly(<span class=string>'elId'</SPAN>).getUpdater();
updr.update({
        url: <span class=string>'http://myserver.com/index.php'</SPAN>,
        params: {
            param1: <span class=string>"foo"</SPAN>,
            param2: <span class=string>"bar"</SPAN>
        }
});</PRE>
    </DIV></LI></UL>
<div class=sect id=event-handling>
<h3>事件控制Event Handling</h3>
<p>事件控制為解決跨瀏覽器的工作帶來便利。</P>
<p>正如Ext.Element封裝了原生的Dom類型節點，Ext.EventObject也是封裝了瀏覽器的原生事件對象。Ext.EventObject的實例解決了各瀏覽器之間的差異。例如鼠標按鈕被點擊了、有按鍵被按下了、或者要停止事件的推進等的任務都有相應的方法參與。</P>
<p>要將事件處理器和頁面中的元素綁定在一起可以使用Ext.Element的<i>on</I>方法。它是addListener方法的簡寫形式。第一個參數是要訂閱的事件類型和第二個參數是准備觸發的事件函數。</P>
<pre>Ext.fly('myEl').on('click', function(e, t) {
	// myEl有點擊的動作
	// e是這次產生的事件對象，Ext.EventObject
	// t是HTMLElement目標
});
</PRE>
<p>Ext Core常規化了所有DOM事件的參數。事件處理器總會被送入一個常規化的事件對象（Ext.EventObject）和目標元素，HTMLElement。</P>
<p>這些是用于事件處理方面的API：</P>
<ul>
  <li><b>addListener/on</B> 
  <div>為此元素加入一個事件處理函數。on()是其簡寫方式。簡寫方式作用等價，寫代碼時更省力。
    <pre><span class=keyword>var</SPAN> el = Ext.get(<span class=string>'elId'</SPAN>);
el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
	<span class=comment>// e是一個標准化的事件對象(Ext.EventObject)</SPAN>

	<span class=comment>// t就是點擊的目標元素，這是個Ext.Element.</SPAN>
	<span class=comment>// 對象指針this也指向t</SPAN>			
});</PRE>
  </DIV>
  <li><b>removeListener/un</B> 
    <div> 從這個元素上移除一個事件處理函數。un()是它的簡寫方式。
      <pre><span class=keyword>var</SPAN> el = Ext.get(<span class=string>'elId'</SPAN>);
el.un(<span class=string>'click'</SPAN>, <span class=keyword>this</SPAN>.handlerFn);
<span class=comment>// 或</SPAN>
el.removeListener(<span class=string>'click'</SPAN>, <span class=keyword>this</SPAN>.handlerFn);</PRE>
    </DIV><li><b>Ext.EventObject</B> 
  <div>EventObject呈現了統一各瀏覽器的這么一個事件模型，并盡量符合W3C的標准方法。
    <pre><span class=comment>// e它不是一個標准的事件對象，而是Ext.EventObject。</SPAN>
<span class=keyword>function</SPAN> handleClick(e){ 
    e.preventDefault();
    <span class=keyword>var</SPAN> target = e.getTarget();
    ...
}

<span class=keyword>var</SPAN> myDiv = Ext.get(<span class=string>'myDiv'</SPAN>);
myDiv.on(<span class=string>"click"</SPAN>, handleClick);
<span class=comment>// 或</SPAN>
Ext.EventManager.on(<span class=string>'myDiv'</SPAN>, <span class=string>'click'</SPAN>, handleClick);
Ext.EventManager.addListener(<span class=string>'myDiv'</SPAN>, <span class=string>'click'</SPAN>, handleClick);</PRE>
</DIV></LI></UL></DIV>
<div class=sect id=adv-event-handling>
<h3>高級事件功能</h3>
<p>事件委托、事件緩沖、事件延遲等的這些功能都是屬于高級事件的控制內容，Ext Core在此方面提供了一系列的配置選項。</P>
<ul>
  <li><b>委托delegation</B> 
    <div>減低內存銷毀和防止內存泄露的隱患是事件委托技朮的兩項好處，其基本要義是：
    <blockquote>
      <p>并不是集合內的每一個元素都要登記上事件處理器，而是在集合其容器上登記一次便可，這樣產生了中央化的一個事件處理器，然后就有不斷循環該事件周期，使得逐層上報機制付諸實現，只要在容器層面定義就可以。</p>
      </BLOCKQUOTE>
    這不是說要求我們在body元素掛上一個全局的事件，這會導致頁面內的任何動作都會觸發那個事件，無疑很有可能會帶來反效果的，我們想提升效能卻會更慢……因此，我們說，適用的場景應該像是下拉列表、日曆等等這樣擁有一群元素的控件，直接或間接地體現在一個容器身上的那么一個控件。下面一個大的ul元素為例子：<br 
  >
      <br>
      以裝飾作示例：
      <div>
          <pre>&lt;<span class=keyword>ul</SPAN> id=<span class=string>'actions'&gt;
    &lt;<span class=keyword>li</SPAN> id=<span class=string>'btn-edit'&gt;&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN> id=<span class=string>'btn-delete'&gt;&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN> id=<span class=string>'btn-cancel'&gt;&lt;/<span class=keyword>li</SPAN>&gt;
&lt;/<span class=keyword>ul</SPAN>&gt;</SPAN></SPAN></SPAN></SPAN></PRE>
          不是登記一個處理器而是為<b>逐個</B>列表項（list item）都登記：
          <pre>Ext.fly(<span class=string>'btn-edit'</SPAN>).on(<span class=string>'click</SPAN>, <span class=keyword>function</SPAN>(e,t) {
	<span class=comment>// 執行事件具體過程</SPAN>
});
Ext.fly(<span class=string>'btn-delete'</SPAN>).on(<span class=string>'click</SPAN>, <span class=keyword>function</SPAN>(e,t) {
	<span class=comment>// 執行事件具體過程</SPAN>
});
Ext.fly(<span class=string>'btn-cancel'</SPAN>).on(<span class=string>'click</SPAN>, <span class=keyword>function</SPAN>(e,t) {
	<span class=comment>// 執行事件具體過程</SPAN>
});</PRE>
          要使用事件委托的方式代替，在容器身上登記一個事件處理器，按照依附的邏輯選擇：
          <pre>Ext.fly(<span class=string>'actions'</SPAN>).on(<span class=string>'click</SPAN>, function(e,t) {
	switch(t.id) {
		case <span class=string>''btn-edit'</SPAN>:
		// <span class=comment>處理特定元素的事件具體過程</SPAN>
		break;
		case <span class=string>'btn-delete'</SPAN>:
		// <span class=comment>處理特定元素的事件具體過程</SPAN>
		break;
		case <span class=string>'btn-cancel'</SPAN>:
		// <span class=comment>處理特定元素的事件具體過程</SPAN>
		break;
	}
});</PRE>
          基于dom各層經過逐層上報的原因，可以說，我們登記了的“actions”的div一定會被訪問得到。這時就是執行我們所指定的switch指令，跳到對應匹配的元素那部分代碼。這樣方法具備可伸縮性，因為我們只要維護一個函數就可以控制那么多的元素的事件。</DIV>
      <br>
  </DIV>  
  <li><b>委托化delegate</B> 
    <div>你在登記事件的處理器的時候可以加入配置這個選項。一個簡易選擇符，用于過濾目標元素，或是往下一層查找目標的子孫。
      <pre>el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
    <span class=comment>// 執行事件具體過程</SPAN>

}, <span class=keyword>this</SPAN>, {
    <span class=comment>// 對子孫'clickable'有效</SPAN>
    delegate: <span class=string>'.clickable'</SPAN> 
});</PRE>
    </DIV>
  <li><b>翻轉hover</B> 
    <div>這是一個Ext的翻轉菜單的實例：
      <pre><span class=comment>// handles when the mouse enters the element</SPAN>	
<span class=keyword>function</SPAN> enter(e,t){
    t.toggleClass(<span class=string>'red'</SPAN>);
}
<span class=comment>// handles when the mouse leaves the element</SPAN>
<span class=keyword>function</SPAN> leave(e,t){
    t.toggleClass(<span class=string>'red'</SPAN>);
}
<span class=comment>// subscribe to the hover</SPAN>

el.hover(over, out);</PRE></DIV>
  <li><b>移除事件句柄removeAllListeners</B> 
    <div>在該元素身上移除所有已加入的偵聽器。
      <pre>el.removeAllListeners();</PRE></DIV><li><b>是否一次性觸發single</B> 
    <div>你在登記事件的處理器的時候可以加入配置這個選項。true代表為事件觸發后加入一個下次移除本身的處理函數。
      <pre>el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
    <span class=comment>// </SPAN><span class=comment>執行事件具體過程</SPAN>
}, <span class=keyword>this</SPAN>, {
    single: <span class=keyword>true</SPAN> <span class=comment>// 觸發一次后不會再執行事件了</SPAN>

});</PRE>
    </DIV>
  <li><b>緩沖buffer</B> 
    <div>你在登記事件的處理器的時候可以加入配置這個選項。若指定一個毫秒數會把該處理函數安排到Ext.util.DelayedTask延時之后才執行。如果事件在那個事件再次觸發，則原處理器句柄將不會被啟用，但是新處理器句柄會安排在其位置。
      <pre>el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
    <span class=comment>// 執行事件具體過程</SPAN>

}, <span class=keyword>this</SPAN>, {
    buffer: 1000 <span class=comment>// 重復響應事件以一秒為時間間隔</SPAN>
});</PRE>
    </DIV>
  <li><b>延時delay</B> 
    <div>你在登記事件的處理器的時候可以加入配置這個選項。制定觸發事件后處理函數延時執行的時間。
      <pre>el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
    <span class=comment>// 執行事件具體過程</SPAN>

}, <span class=keyword>this</SPAN>, {
    <span class=comment>// 延遲事件，響應事件后開始計時（這里一秒）</SPAN>
    delay: 1000 
    
});</PRE>
    </DIV>
  <li><b>目標target</B> 
    <div>你在登記事件的處理器的時候可以加入配置這個選項。如果你想另外指定另外一個目標元素，你可以在這個配置項上面設置。這可保證在事件上報階段中遇到這個元素才會執行這個處理函數。
      <pre>el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
    <span class=comment>// 執行事件具體過程</SPAN>
}, <span class=keyword>this</SPAN>, {
    <span class=comment>// 遇到里頭的第一個'div'才會觸發事件</SPAN>
    target: el.up(<span class=string>'div'</SPAN>) 
});</PRE>
    </DIV></LI></UL>
</DIV>
<div class=sect id=dim-sizing>
<h3>尺寸&amp;大小</h3>
<p>某個元素在頁面上，我們就想獲得到其尺寸大小或改變它的尺寸大小。毫無意外下，Ext Core也把這些任務抽象為清晰的API供大家使用。這些都是setter的方法，可傳入動畫的配置參數，或即就是以個布爾型的true，表示這是默認的動畫。我們來看一看：</P>
<pre><span class=comment>// 設置高度為200px以默認配置進行動畫</SPAN>
Ext.fly(<span class=string>'elId'</SPAN>).setHeight(200, true);

<span class=comment>// 設置高度為150px以自定義的配置進行動畫
</SPAN>Ext.fly(<span class=string>'elId'</SPAN>).setHeight(150, {
    duration : .5, <span class=comment>// 動畫將會持續半秒</SPAN>
    <span class=comment>// 動畫過后改變其內容為“結束”</SPAN>

    callback: <span class=keyword>function</SPAN>(){ <span class=keyword>this</SPAN>.update(<span class=string>"結束"</SPAN>); } 
});</PRE>
<p>拉出Firebug，檢測一下元素（右擊后選擇元素“Inspect Element”），觀察右方的面板并點擊“layout”，您應會看到這樣：</P>
<div align=center><IMG src="firebug-layout-sm.png" width="570" height="198" > </DIV>
<p>這塊地方提供的信息足夠清楚顯示有關該元素的所有尺寸。從中得知，當前元素寬895px、高1669px、0px的內邊距、0px的邊框和0px的外邊距。不過這些信息亦可從Ext Core的Ext.Element的API查詢得知！</P>
<pre><span class=keyword>var</SPAN> dimSz = Ext.get(<span class=string>'dim-sizing'</SPAN>);
<span class=keyword>var</SPAN> padding = dimSz.getPadding(<span class=string>'lrtb'</SPAN>); <span class=comment>// 返回0px的值</SPAN>
<span class=keyword>var</SPAN> border = dimSz.getBorderWidth(<span class=string>'lrtb'</SPAN>); <span class=comment>// 返回0px的值</SPAN>

<span class=keyword>var</SPAN> height = dimSz.getHeight(); <span class=comment>// 返回1691px的值</SPAN>
<span class=keyword>var</SPAN> width = dimSz.getWidth(); <span class=comment>// 返回895px的值</SPAN></PRE>
<p>把代碼弄進Firebug調試看看，有否這樣的結果？實際上用這些set的方法改變高度或寬度后就可立即在firebug的layout面板看到的。(<b>注意：</B>if如果對圖片設置其不同大小的高度或寬度，那就是瀏覽器的尺寸。如果你在瀏覽器中瀏覽圖片元素的實際情況那就是實際的輸出大小。）</P>
<p>剩下的API是哪些？我們看看:</P> 
<ul>
  <li><b>getHeight</B> 
    <div>返回元素的偏移（offset）高度。
      <pre><span class=keyword>var</SPAN> ht = Ext.fly(<span class=string>'elId'</SPAN>).getHeight();</PRE></DIV><li><b>getWidth</B> 
        <div>返回元素的偏移（offset）寬度。
          <pre><span class=keyword>var</SPAN> wd = Ext.fly(<span class=string>'elId'</SPAN>).getWidth();</PRE></DIV><li><b>setHeight</B> 
            <div>設置元素的高度。
              <pre>Ext.fly(<span class=string>'elId'</SPAN>).setHeight();</PRE></DIV><li><b>setWidth</B> 
                <div>設置元素的寬度。
                  <pre>Ext.fly(<span class=string>'elId'</SPAN>).setWidth();</PRE></DIV><li><b>getBorderWidth</B> 
                    <div>返回指定邊（side(s)）的padding寬度。
                      <pre><span class=keyword>var</SPAN> bdr_wd = Ext.fly(<span class=string>'elId'</SPAN>).getBorderWidth(<span class=string>'lr'</SPAN>);</PRE></DIV><li><b>getPadding</B> 
                        <div>可以是t, l, r, b或是任何組合。例如，傳入lr的參數會得到(l)eft padding +(r)ight padding。
                          <pre><span class=keyword>var</SPAN> padding = Ext.fly(<span class=string>'elId'</SPAN>).getPadding(<span class=string>'lr'</SPAN>);</PRE></DIV><li><b>clip</B> 
                            <div> 保存當前的溢出（overflow），然后進行裁剪元素的溢出部分 - 使用unclip()來移除。
                              <pre>Ext.fly(<span class=string>'elId'</SPAN>).clip();</PRE></DIV><li><b>unclip</B> 
                                <div>在調用clip()之前，返回原始的裁剪部分（溢出的）。
                                  <pre>Ext.fly(<span class=string>'elId'</SPAN>).unclip();</PRE></DIV><li><b>isBorderBox</B> 
                                    <div>測試不同的CSS規則/瀏覽器以確定該元素是否使用Border Box。
                                      <pre>if (Ext.isBorderBox) {
    <span class=comment>// </SPAN>
}</PRE>
</DIV></LI></UL></DIV>
<div class=sect id=positioning>
<h3>定位</h3>
<p>通過Ext Core定義的API能快速地釆集元素位置的各方面數據，歸納為get的或set的方法，全部瀏覽器都可通用。類似于上一節的尺寸大小的API，多數的setter方法支持動畫效果。可在第二參數中傳入動畫的配置參數（object-literal configuration object），或即就是以個布爾型的true，表示這是默認的動畫。我們來看一看例子是怎樣子的：</P>
<pre><span class=comment>// 改變x-coord為75px，附有自定義的動畫配置</SPAN>
Ext.fly(<span class=string>'elId'</SPAN>).setX(75, {
    duration : .5, <span class=comment>// 動畫將會持續半秒</SPAN>
    <span class=comment>// 動畫過后改變其內容為“結束”</SPAN>

    callback: <span class=keyword>function</SPAN>(){ <span class=keyword>this</SPAN>.update(<span class=string>"結束"</SPAN>); }
});
</PRE>
<ul>
  <li><b>getX</B> 
    <div>返回元素相對于頁面坐標的X位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標（display:none或未加入的elements返回false）。
      <pre><span class=keyword>var</SPAN> elX = Ext.fly(<span class=string>'elId'</SPAN>).getX()</PRE></DIV><li><b>getY</B> 
    <div> 返回元素相對于頁面坐標的Y位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標（display:none或未加入的elements返回false）。
      <pre><span class=keyword>var</SPAN> elY = Ext.fly(<span class=string>'elId'</SPAN>).getY()</PRE></DIV><li><b>getXY</B> 
    <div> 返回元素當前頁面坐標的位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標（display:none或未加入的elements返回false）。
      <pre><span class=keyword>var</SPAN> elXY = Ext.fly(<span class=string>'elId'</SPAN>).getXY() <span class=comment>// elXY是數組</SPAN></PRE>
    </DIV><li><b>setX</B> 
    <div> 返回元素相對于頁面坐標的X位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標（display:none或未加入的elements返回false）。
      <pre>Ext.fly(<span class=string>'elId'</SPAN>).setX(10)</PRE></DIV><li><b>setY</B> 
    <div> 返回元素相對于頁面坐標的Y位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標（display:none或未加入的elements返回false）。
      <pre>Ext.fly(<span class=string>'elId'</SPAN>).setY(10)</PRE></DIV><li><b>setXY</B> 
    <div> 返回元素當前頁面坐標的位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標（display:none或未加入的elements返回false）。
      <pre>Ext.fly(<span class=string>'elId'</SPAN>).setXY([20,10])</PRE></DIV><li><b>getOffsetsTo</B> 
    <div> 返回當前元素與送入元素的距離。這兩個元素都必須是屬于DOM樹中的一部分才擁有正確的頁面坐標（display:none或未加入的elements返回false）。
      <pre><span class=keyword>var</SPAN> elOffsets = Ext.fly(<span class=string>'elId'</SPAN>).getOffsetsTo(anotherEl);</PRE></DIV><li><b>getLeft</B> 
    <div>獲取左邊的X坐標。
      <pre><span class=keyword>var</SPAN> elLeft = Ext.fly(<span class=string>'elId'</SPAN>).getLeft();</PRE></DIV><li><b>getRight</B> 
    <div>獲取元素右邊的X坐標（元素X位置 + 元素寬度）。
      <pre><span class=keyword>var</SPAN> elRight = Ext.fly(<span class=string>'elId'</SPAN>).getRight();</PRE></DIV><li><b>getTop</B> 
    <div>獲取頂部Y坐標。
      <pre><span class=keyword>var</SPAN> elTop = Ext.fly(<span class=string>'elId'</SPAN>).getTop();</PRE></DIV><li><b>getBottom</B> 
    <div>獲取元素的底部Y坐標（元素Y位置 + 元素寬度）。
      <pre><span class=keyword>var</SPAN> elBottom = Ext.fly(<span class=string>'elId'</SPAN>).getBottom();</PRE></DIV><li><b>setLeft</B> 
    <div>直接使用CSS樣式（代替setX()），設定元素的left位置。
      <pre>Ext.fly(<span class=string>'elId'</SPAN>).setLeft(25)</PRE></DIV><li><b>setRight</B> 
    <div>設置元素CSS Right的樣式。
      <pre>Ext.fly(<span class=string>'elId'</SPAN>).setRight(15)</PRE></DIV><li><b>setTop</B> 
        <div>直接使用CSS樣式（代替setY()），設定元素的top位置。
          <pre>Ext.fly(<span class=string>'elId'</SPAN>).setTop(12)</PRE></DIV><li><b>setBottom</B> 
    <div>設置元素CSS Bottom的樣式。
      <pre>Ext.fly(<span class=string>'elId'</SPAN>).setBottom(15)</PRE></DIV><li><b>setLocation</B> 
  <div>無論這個元素如何定位，設置其在頁面的坐標位置。元素必須是DOM樹中的一部分才擁有頁面坐標（display:none或未加入的elements會當作無效而返回false）。
    <pre>Ext.fly(<span class=string>'elId'</SPAN>).setLocation(15,32)</PRE></DIV>
  <li><b>moveTo</B> 
    <div>無論這個元素如何定位，設置其在頁面的坐標位置。元素必須是DOM樹中的一部分才擁有頁面坐標（display:none或未加入的elements會當作無效而返回false）。
      <pre>Ext.fly(<span class=string>'elId'</SPAN>).moveTo(12,17)</PRE></DIV><li><b>position</B> 
    <div>初始化元素的位置。如果未傳入期待的位置，而又還沒定位的話，將會設置當前元素為相對（relative）定位。
      <pre>Ext.fly(<span class=string>'elId'</SPAN>).position(<span class=string>"relative"</SPAN>)</PRE></DIV><li><b>clearPositioning</B> 
    <div>當文檔加載后清除位置并復位到默認。
      <pre>Ext.fly(<span class=string>'elId'</SPAN>).clearPositioning()	
Ext.fly(<span class=string>'elId'</SPAN>).clearPositioning(<span class=string>"top"</SPAN>)</PRE></DIV><li><b>getPositioning</B> 
  <div>返回一個包含CSS定位信息的對象。有用的技巧：連同setPostioning一起，可在更新執行之前，先做一個快照（snapshot），之后便可恢復該元素。
    <pre><span class=keyword>var</SPAN> pos = Ext.fly(<span class=string>'elId'</SPAN>).getPositioning()</PRE></DIV><li><b>setPositioning</B> 
      <div>由getPositioning()返回的對象去進行定位。
        <pre>Ext.fly(<span class=string>'elId'</SPAN>).setPositioning({
    left: <span class=string>'static'</SPAN>,
    right: <span class=string>'auto'</SPAN>
})</PRE></DIV><li><b>translatePoints</B> 
  <div>送入一個頁面坐標的參數，將其翻譯到元素的CSS left/top值。
<pre><span class=comment>// {left:translX, top: translY}</SPAN>
<span class=keyword>var</SPAN> points = Ext.fly(<span class=string>'elId'</SPAN>).translatePoints(15,18); </PRE></DIV></LI></UL></DIV>
<div class=sect id=animations>
<h3>動畫</h3>
<p>Ext Core已經齊備了若干的動畫的插件，附加在Ext.Element的身上，讓你進一步地發揮這一組組預配置的動畫，作出更“酷”的東東來。</P>
<div id=slideEl 
style="WIDTH: 100px; HEIGHT: 100px; BACKGROUND-COLOR: rgb(255,0,0)"></DIV>
<p>放在Firebug里面運行這段代碼看看，你將發現Ext就內建了一組完整的動畫。每一組動畫就是使用這些配置字面對象（configuration object literal），去制定這些動畫如何產生。不一定要默認的配置，或者你也可以在動畫執行完畢后接着執行一個回調函數：</P>
<pre>Ext.fly(<span class=string>'slideEl'</SPAN>).slideOut(<span class=string>'r'</SPAN>);</PRE>
<pre>Ext.fly(<span class=string>'slideEl'</SPAN>).slideOut(<span class=string>'r'</SPAN>, {
	callback : <span class=keyword>function</SPAN>(){
		alert(<span class=string>'元素已滑出');
	}
});</SPAN></PRE>
<p>可以看出這樣子做動畫着實強大！</P>
<p>動畫支持八方位的定向，所以你可以選擇八個不同的定位點來啟動您的動畫效果。</P>
<table align="center">
  <thead>
  <tr>
    <th>Valuer</TH>
    <th></TH></TR></THEAD>
  <tbody>
  <tr>
    <td>tl</TD>
    <td>The top left corner左上角</TD>
  </TR>
  <tr>
    <td>t</TD>
    <td>The center of the top edge頂部中央</TD>
  </TR>
  <tr>
    <td>tr</TD>
    <td>The top right corner右上角</TD>
  </TR>
  <tr>
    <td>l</TD>
    <td>The center of the left edge左邊中央</TD>
  </TR>
  <tr>
    <td>r</TD>
    <td>The center of the right edge右邊中央</TD>
  </TR>
  <tr>
    <td>bl</TD>
    <td>The bottom left corner左下角</TD>
  </TR>
  <tr>
    <td>b</TD>
    <td>The center of the bottom edge底部中央</TD>
  </TR>
  <tr>
    <td>br</TD>
    <td>The bottom right corner右下角</TD>
  </TR></TBODY></TABLE>
<p>進一步瀏覽里面的API： 
</p>
<ul>
  <li><b>slideIn/slideOut</B> 
    <div>將元素滑入到視圖中。作為可選參數傳入的定位錨點將被設置為滑入特效的起始點。該函數會在需要的時候自動將元素與一個固定尺寸的容器封裝起來。有效的定位錨點可以參見 Fx 類的概述。用法：
      <pre><span class=comment>// 默認情況：將元素從頂部滑入</SPAN>

el.slideIn();
<span class=comment>// </SPAN>自定義：在2秒鐘內將元素從右邊滑入
el.slideOut();

<span class=comment>// 常見的配置選項及默認值</SPAN>
el.slideIn(<span class=string>'t'</SPAN>, {
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5
});
el.slideOut(<span class=string>'t'</SPAN>, {
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5,
    remove: <span class=keyword>false</SPAN>,
    useDisplay: <span class=keyword>false</SPAN>

});</PRE>
    </DIV><li><b>puff</B> 
  <div>漸隱元素的同時還伴隨着向各個方向緩慢地展開。特效結束后，元素會被隱藏（visibility = 'hidden'），
但是塊元素仍然會在 document 對象中占據空間。如果需要將元素從 DOM 樹刪除，則使用'remove'配置選項。用法：
  <pre>// 默認
el.puff();

<span class=comment>// 常見的配置選項及默認值</SPAN>
el.puff({
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5,
    remove: <span class=keyword>false</SPAN>,
    useDisplay: <span class=keyword>false</SPAN>

});</PRE></DIV>
  <li><b>switchOff</B> 
  <div>類似單擊過后般地閃爍一下元素，然后從元素的中間開始收縮（類似于關閉電視機時的效果）。
特效結束后，元素會被隱藏（visibility = 'hidden'），但是塊元素仍然會在 document 對象中占據空間。
如果需要將元素從 DOM 樹刪除，則使用'remove'配置選項。用法：
<pre>// 默認
el.switchOff();

<span class=comment>// 所有的配置選項及默認值</SPAN>
el.switchOff({
    easing: <span class=string>'easeIn'</SPAN>,
    duration: .3,
    remove: <span class=keyword>false</SPAN>,
    useDisplay: <span class=keyword>false</SPAN>

});</PRE></DIV>
  <li><b>highlight</B> 
    <div>根據設置的顏色高亮顯示 Element 對象（默認情況下應用于 background-color 屬性，但是也可以通過&quot;attr&quot;配置選項來改變），然后漸隱為原始顏色。如果原始顏色不可用，你應該設置&quot;endColor&quot;配置選項以免動畫結束后被清除。用法：
      <pre><span class=comment>// 默認情況：高亮顯示的背景顏色為黃色</SPAN>
el.highlight();

<span class=comment>// </SPAN>自定義：高亮顯示前景字符顏色為藍色并持續2秒
el.highlight(<span class=string>"ffff9c"</SPAN>, {
    <span class=comment>// 可以任何有效的CSS屬性表示顏色</SPAN>

    attr: <span class=string>"background-color"</SPAN>, 
    endColor: (current color) or <span class=string>"ffffff"</SPAN>,
    easing: <span class=string>'easeIn'</SPAN>,
    duration: 1
});</PRE>
    </DIV><li><b>frame</B> 
      <div>展示一個展開的波紋，伴隨着漸隱的邊框以突出顯示 Element 對象。用法：
      <pre><span class=comment>// 默認情況：一個淡藍色的波紋</SPAN>
el.frame();

<span class=comment>// 自定義：三個紅色的波紋并持續3秒</SPAN>
el.frame(<span class=string>"C3DAF9"</SPAN>, 1, {
    duration: 1 <span class=comment>//每個波紋持續的時間
    </SPAN><span class=comment>// 注意：這里不能使用 Easing 選項在，即使被包含了也會被忽略</SPAN>
});</PRE>
      </DIV><li><b>pause</B> 
        <div>在任何后續的等效開始之前創建一次暫停。如果隊列中沒有后續特效則沒有效果。用法：
          <pre>el.pause(1);</PRE></DIV><li><b>fadeIn/fadeOut</B> 
            <div> 將元素從透明漸變為不透明。結束時的透明度可以根據&quot;endOpacity&quot;選項來指定。用法：
              <pre><span class=comment>// </SPAN>默認情況：將可見度由 0 漸變到 100%

el.fadeIn();
el.fadeOut();

<span class=comment>// </SPAN>自定義：在2秒鐘之內將可見度由 0 漸變到 75%
el.fadeIn({
    endOpacity: 1, // 可以是 0 到 1 之前的任意值（例如：.5）	
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5
});
el.fadeOut({
    endOpacity: 0, // 可以是 0 到 1 之前的任意值（例如：.5）
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5,
    remove: <span class=keyword>false</SPAN>,
    useDisplay: <span class=keyword>false</SPAN>

});</PRE>
            </DIV><li><b>scale</B> 
              <div>以動畫展示元素從開始的高度/寬度轉換到結束的高度/寬度。用法：
              <pre><span class=comment>// </SPAN>將寬度和高度設置為 100x100 象素
el.scale(100, 100);

<span class=comment>// 常見的配置選項及默認值。<br>// 如果給定值為 null，則高度和寬度默認被設置為元素已有的值。
</SPAN>el.scale(
    [element's width],
    [element's height], {
	    easing: <span class=string>'easeOut'</SPAN>,
	    duration: .35
	}
);</PRE>
              </DIV><li><b>shift</B> 
                <div>以動畫展示元素任意組合屬性的改變，如元素的尺寸、位置坐標和（或）透明度。如果以上屬性中的任意一個沒有在配置選項對象中指定則該屬性不會發生改變。為了使該特效生效，則必須在配置選項對象中設置至少一個新的尺寸、位置坐標或透明度屬性。用法：
                  <pre><span class=comment>// 將元素水平地滑動到X坐標值為200的位置，同時還伴隨着高度和透明度的改變
</SPAN>el.shift({ x: 200, height: 50, opacity: .8 });

<span class=comment>// 常見的配置選項及默認值。</SPAN>
el.shift({
    width: [element's width],
    height: [element's height],
    x: [element's x position],
    y: [element's y position],
    opacity: [element's opacity],
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .35
});</PRE>
                </DIV><li><b>ghost</B> 
  <div>將元素從視圖滑出并伴隨着漸隱。作為可選參數傳入的定位錨點將被設置為滑出特效的結束點。用法：
    <pre><span class=comment>// 默認情況：將元素向下方滑出并漸隱</SPAN>
el.ghost();

<span class=comment>// </SPAN>自定義：在2秒鐘內將元素向右邊滑出并漸隱
el.ghost(<span class=string>'b'</SPAN>, {
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5,
    remove: <span class=keyword>false</SPAN>,
    useDisplay: <span class=keyword>false</SPAN>

});</PRE>
  </DIV>
  <li><strong>復雜的動畫</strong> 
    <div>
  <div id=complexEl 
  style="BORDER-RIGHT: rgb(0,0,0) 0px solid; BORDER-TOP: rgb(0,0,0) 0px solid; BORDER-LEFT: rgb(0,0,0) 0px solid; WIDTH: 100px; BORDER-BOTTOM: rgb(0,0,0) 0px solid; HEIGHT: 100px; BACKGROUND-COLOR: rgb(255,0,0)" 
  ></DIV>
  <p>我們也可以用ExtCore的動畫系統來建立我們制定的動畫，在Firebug里面測試一下下面的代碼：</p>
<pre><span class=keyword>var</SPAN> el = Ext.get(<span class=string>'complexEl'</SPAN>)
el.animate({
	borderWidth: {to: 3, from: 0},
	opacity: {to: .3, from: 1},
	height: {to: 50, from: el.getHeight()},
	width: {to: 300, from: el.getWidth()}	
});</PRE></DIV></LI></UL></DIV>
<div class=sect id=misc>
<h3>雜項</h3>
<p>以上未能分類的就這里列出，都是Ext.Element方法。</P>
<ul>
  <li><b>focus</B> 
    <div>使這個元素得到焦點。忽略任何已捕獲的異常。
      <pre>el.focus();</PRE></DIV><li><b>blur</B> 
        <div>使這個元素失去焦點。忽略任何已捕獲的異常。
          <pre>el.blur();</PRE></DIV><li><b>getValue</B> 
            <div>回“值的”屬性值。
              <pre>el.getValue();
el.getValue(<span class=keyword>true</SPAN>); <span class=comment>// 輸出值為數字型</SPAN>
</PRE>
            </DIV><li><b>isBorderBox</B> 
  <div>測試不同的CSS規則/瀏覽器以確定該元素是否使用Border Box。
    <pre>if (Ext.isBorderBox) { }</PRE></DIV><li><b>getAttributeNS</B> 
  <p>在DOM節點中的某個元素，返回其一個命名空間屬性的值。</P><pre>el.getAttributeNS("","name");</PRE></LI></UL>
<h2>CompositeElement元素</H2>
<h3>什么是CompositeElement？</H3>
<p>CompositeElement能夠把一組元素視作一個元素來處理（依據<a 
href="http://en.wikipedia.org/wiki/Composite_pattern">維基百科全書</A>），這組元素的數量可以零個到多個。CompositeElement釆用與Ext.Element相同的接口，以簡化程序員的工作，也可以減少處理集合上的那些一般內核檢查（指要寫“循環”的代碼）。通常CompositeElement由執行靜態方法<a 
href="http://extjs.com/deploy/dev/docs/?class=Ext&amp;member=select">Ext.select</A>來獲取得到。Ext.select()基于DomQuery來搜索整個文檔，匹配符合特定選擇符（Selecetor）的元素。 
</P>
<p>例如下列的裝飾元素：</P><pre>&lt;html&gt;
   &lt;body&gt;
      &lt;div id=<span class=string>"first"</SPAN> class=<span class=string>"title"</SPAN>&gt;Sample A&lt;/div&gt;
      &lt;div id=<span class=string>"second"</SPAN> class=<span class=string>"doesNotMatch"</SPAN>&gt;Lorem Ipsum&lt;/div&gt;

      &lt;div id=<span class=string>"third"</SPAN> class=<span class=string>"title secondCSSCls"</SPAN>&gt;Some additional content&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;</PRE>
<p>我們根據選擇符“.title”查詢整張頁面得到一個CompositeElement類型的對象，其包含了兩個div的引用，分別是第一個div和第二個div。</P><pre>var els = Ext.select('.title');
</PRE>
<p>注意：第三個元素同時還附有secondCSSCls的樣式。HtmlElement元素可允許有多個CSS樣式類，就用空格分割開。這里的選擇符不是說只要title樣式的，那么“first”與“thrid”都能返回得到。</P>
<p>獲取CompositeElement對象后即可像單個元素那段操作一群Elements。例如，我們對集合中的每個元素加入CSS的.error樣式。</P><pre>var els = Ext.select('.title');
els.addClass('error');
</PRE>
<p>如果要獲取的某一些元素是處于另處一元素的附近的，這兩者之間相對的關系是已知的，那么就可以從那個元素為起點進行搜索查詢。這樣查詢效率會更來得快，原因是你是在文檔中的某一部分內局部地查詢，自然比全體查詢的快。下面HTML中，“accordion”的div標簽是包含着first、second 
和third元素： </P><pre>&lt;html&gt;
   &lt;body&gt;
      &lt;div id=<span class=string>"accordion"</SPAN>&gt;
         &lt;div id=<span class=string>"first"</SPAN> class=<span class=string>"title"</SPAN>&gt;Sample A&lt;/div&gt;

         &lt;div id=<span class=string>"second"</SPAN> class=<span class=string>"doesNotMatch"</SPAN>&gt;Lorem Ipsum&lt;/div&gt;
         &lt;div id=<span class=string>"third"</SPAN> class=<span class=string>"title secondCSSCls"</SPAN>&gt;
            Some additional content
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;</PRE>
<p>由于我們得知這三元素都在accordion元素里面的，因此我們將搜索范圍僅限定在accordion元素內。如果清楚元素的相對位置，應該盡量使用這種縮小范圍的方式來查詢，以利于性能提升。 
</P>
<p>其它有用的CompositeElement方法如下面代碼所列：</P><pre>var accordion = Ext.get('accordion');
accordion.select('title');
// firstItem是第一個的div，類型是Ext.Element
var firstItem =  accordion.item(0);
 // 提示1或居二的位置
alert(accordion.indexOf('third'));
// 提示2
alert(accordion.getCount()); 
// 集合里和DOM里面都沒有這個元素了
accordion.removeElement('one', true); </PRE>
<p>注意：Ext 
JS用戶所熟悉的一些方法，如each、first、last、fill、contains、filter這些都在CompositeElement里都沒有。 </P>
<h2>Ajax</H2>
<h3>Ajax的定義</H3>
<p>“異步JavaScript與XML（Ajax）”與是几種開發技朮匯總的名稱，用于開發Web交互程序或富介面的互聯網程序。利用Ajax，可不在影響現有頁面之交互的情況下，達到與服務端異步式的數據獲取，當前頁面無須一定的變化。負責數據交互的是<a 
href="http://www.w3.org/TR/XMLHttpRequest/">XHR對象</A>，基于各瀏覽器其實現XHR方式的不同，Ajax框架都提供一個抽象接口，處理了這些差并異集中在一個可復用的編程基建中，而在Ext中，負責這些任務的正是Ext.Ajax對象。 
</P>
<h3>Ext.Ajax</H3>
<p>Ext.Ajax對象繼承自Ext.data.Connection，定義為單例提供了一個既統一又高度靈活的Ajax通迅服務。利用這個單例對象，就可以處理全體Ajax請求，并執行相關的方法、事件和參數。 
</P>
<h3>Ext.Ajax的事件</H3>
<p>每次請求都觸發事件，這是全局規定的。 </P>
<ul>
  <li><b>beforerequest (conn, 
  opts)</B> 
  <div>任何Ajax請求發送之前觸發。</DIV>
  <li><b>requestcomplete (conn, 
  response, opts)</B> 
  <div>任何Ajax成功請求后觸發。</DIV>
  <li><b>requestexception (conn, 
  response, opts)</B> 
  <div>服務端返回一個錯誤的HTTP狀態碼時觸發。</DIV></LI></UL><pre>// 例子:凡是Ajax通迅都會通過spinner告知狀態如何。
Ext.Ajax.on('beforerequest', this.showSpinner, this);
Ext.Ajax.on('requestcomplete', this.hideSpinner, this);
Ext.Ajax.on('requestexception', this.hideSpinner, this);
</PRE>
<h3>Ext.Ajax的屬性</H3>
<p>由于Ext.Ajax是<a 
href="http://extjs.com/learn/Manual:Intro:Patterns:Singleton">單例</A>，所以你可以在發起請求的時候才覆蓋Ext.Ajax屬性。這些是最常見的屬性： </P>
<ul>
  <li><b 
  >method：</B>用于請求的默認方法，注意這里大小寫有關系的，應為是全部大寫（默認為undefined，如不設置參數就是"POST"，否則是"GET"）。 

  <li><b 
  >extraParams：</B>收集各屬性的對象，每次發起請求就會把該對象身上的各屬性作為參數發送出去（默認為undefined）需要與Session信息和其它數據交互就要在這里設置。 

  <li><b>url：</B> 
  請求目標的服務器地址（默認為undefined），如果服務端都用一個url來接收請求，那么在這里設置過一次就足夠了。 
  <li><b 
  >defaultHeaders：</B>對請求頭部設置的對象（默認為undefined）。 </LI></UL><pre>// 每次請求都將這字段與信息注入到頭部中去。
Ext.Ajax.defaultHeaders = {
    'Powered-By': 'Ext Core'
};
</PRE>
<h3>Ext.Ajax.request</H3>
<p>Ext.Ajax.request就是發送與接收服務端函數的函數。服務端返用<a 
href="http://www.w3.org/TR/XMLHttpRequest/#response-entity-body">response</A>以決定執行success或failure函數。注意這種success/failure函數是異步的，即就是服務端有響應后客戶端這邊回頭調用（回調函數），期用客戶端的Web頁面還可以進行其它任務的操作。 
</P><pre>Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   success: function(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: function(response, opts) {
      console.log('服務端失效的狀態代碼：' + response.status);
   }
});
</PRE>
<h3>Ext.Updater</H3>
<p>Ajax另外一個常見用法是動態更新頁面中的原素不需要刷新頁面。response方法暴露了el配置項，在請求之后根據內容設置到元素的innerHTML。 
</P>
<h3>表單的Ajax式提交</H3>
<p>用Ext.Ajax.request 的配置項提交表單:</P><pre>Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   form: 'myForm',
   success: function(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: function(response, opts) {
      console.log('服務端失效的狀態代碼：' + response.status);
   }
});
</PRE>
<h2>DomQuery</H2>
<h3>什么是DomQuery？</H3>
<p>DomQuery的作用在于提供選擇符（Selector）、XPath的快速元素定位，對HTML與XML的文檔都有效。DomQuery支持到CSS3規范的選擇符，還有一些自定義的選擇符與較簡單的，一份完整的CSS3規范在<a 
href="http://www.w3.org/TR/css3-selectors/">這里</A>。</P>
<h3>多選擇符</H3>
<p>你可以輸入多個查詢條件，然后在一個對象上面返回。</P><pre>// 匹配所有的帶foo class的div和帶bar class的span
Ext.select('div.foo, span.bar');
</PRE>
<h3>根節點</h3>
<p> 使用選擇符，它可以支持一個根節點的概念。根節點的意思是如果有指定選擇符的根節點表示從該節點上開始進行搜索。這樣可以助于提升性能，因為若不存在根節點表示從document body開始進行搜索，速度自然比較慢。</P>
<pre>Ext.get('myEl').select('div.foo');<span class=comment>// 這是等價的</SPAN>
Ext.select('div.foo', true, 'myEl');<span class=comment>// 這是等價的</SPAN>
</PRE>
<h3>查詢鏈</h3>
<p>對于搆成復雜的查詢情況，可以由多個查詢條件組成查詢鏈。依次按順序進行屬性鏈的查詢。</P>
<pre><span class=comment>// 匹配class為foo的div，要求是有title屬性為bar的div，而且還是這個div下面最前頭的子元素</SPAN>
Ext.select('div.foo[title=bar]:first');
</PRE>
<h3>元素選擇符</h3>
<ul class="list">
    <li> <b>*</b> 任意元素</li>
    <li> <b>E</b> 一個標簽為 E 的元素</li>
    <li> <b>E F</b> 所有 E 元素的分支元素中含有標簽為 F 的元素</li>
    <li> <b>E > F</b> 或 <b>E/F</b> 所有 E 元素的直系子元素中含有標簽為 F 的元素</li>
    <li> <b>E + F</b> 所有標簽為 F 并緊隨着標簽為 E 的元素之后的元素</li>
    <li> <b>E ~ F</b> 所有標簽為 F 并與標簽為 E 的元素是側邊的元素</li>
</ul>
  
  <pre><span class=comment>// Matches all div elements</SPAN>
Ext.select('div'); 
<span class=comment>// Matches all span elements contained inside a div at any level</SPAN>
Ext.select('div span');
<span class=comment>// Matches all li elements with a ul as their immediate parent</SPAN>

Ext.select('ul &gt; li'); 
</PRE>
<h3>屬性選擇符</h3>
<ul class="list">
    <li> <b>E[foo]</b> 擁有一個名為 “foo” 的屬性</li>
    <li> <b>E[foo=bar]</b> 擁有一個名為 “foo” 且值為 “bar” 的屬性</li>
    <li> <b>E[foo^=bar]</b> 擁有一個名為 “foo” 且值以 “bar” 開頭的屬性</li>
    <li> <b>E[foo$=bar]</b> 擁有一個名為 “foo” 且值以 “bar” 結尾的屬性</li>
    <li> <b>E[foo*=bar]</b> 擁有一個名為 “foo” 且值包含字串 “bar” 的屬性</li>
    <li> <b>E[foo%=2]</b> 擁有一個名為 “foo” 且值能夠被2整除的屬性</li>
    <li> <b>E[foo!=bar]</b> 擁有一個名為 “foo” 且值不為 “bar” 的屬性</li>
</ul>

<pre><span class=comment>// Matches all div elements with the class news</SPAN>
Ext.select('div.news'); 
<span class=comment>// Matches all a elements with an href that is http://extjs.com</SPAN>
Ext.select('a[href=http://extjs.com]'); 
<span class=comment>// Matches all img elements that have an alt tag</SPAN>
Ext.select('img[alt]'); 
</PRE>
<h3>偽類選擇符</h3>
<ul class="list">
    <li> <b>E:first-child</b> E 元素為其父元素的第一個子元素</li>
    <li> <b>E:last-child</b> E 元素為其父元素的最后一個子元素</li>
    <li> <b>E:nth-child(<i>n</i>)</b> E 元素為其父元素的第 <i>n</i> 個子元素（由1開始的個數）</li>
    <li> <b>E:nth-child(odd)</b> E 元素為其父元素的奇數個數的子元素</li>
    <li> <b>E:nth-child(even)</b> E 元素為其父元素的偶數個數的子元素</li>
    <li> <b>E:only-child</b> E 元素為其父元素的唯一子元素</li>
    <li> <b>E:checked</b> E 元素為擁有一個名為“checked”且值為“true”的元素（例如：單選框或復選框）</li>
    <li> <b>E:first</b> 結果集中第一個 E 元素</li>
    <li> <b>E:last</b> 結果集中最后一個 E 元素</li>
    <li> <b>E:nth(<i>n</i>)</b> 結果集中第 <i>n</i> 個 E 元素（由1開始的個數）</li>
    <li> <b>E:odd</b> :nth-child(odd) 的簡寫</li>
    <li> <b>E:even</b> :nth-child(even) 的簡寫</li>
    <li> <b>E:contains(foo)</b> E 元素的 innerHTML 屬性中包含“foo”字串</li>
    <li> <b>E:nodeValue(foo)</b> E 元素包含一個 textNode 節點且 nodeValue 等于“foo”</li>
    <li> <b>E:not(S)</b> 一個與簡單選擇符 S 不匹配的 E 元素</li>
    <li> <b>E:has(S)</b> 一個包含與簡單選擇符 S 相匹配的分支元素的 E 元素</li>
    <li> <b>E:next(S)</b> 下一個側邊元素為與簡單選擇符 S 相匹配的 E 元素</li>
    <li> <b>E:prev(S)</b> 上一個側邊元素為與簡單選擇符 S 相匹配的 E 元素</li>
</ul>
<pre><span class=comment>// Matches the first div with a class of code</SPAN>
Ext.select('div.code:first'); 
<span class=comment>// Matches spans that fall on an even index.</SPAN>
Ext.select('span:even'); 
<span class=comment>// Matches all divs whos next sibling is a span with class header.</SPAN>
Ext.select('div:next(span.header)); 
</PRE>
<div class=sect id=css-selectors>
<h3>CSS 值選擇符</h3>
<ul class="list">
    <li> <b>E{display=none}</b> css 的“display”屬性等于“none”</li>
    <li> <b>E{display^=none}</b> css 的“display”屬性以“none”開始</li>
    <li> <b>E{display$=none}</b> css 的“display”屬性以“none”結尾</li>
    <li> <b>E{display*=none}</b> css 的“display”屬性包含字串“none”</li>
    <li> <b>E{display%=2}</b> css 的“display”屬性能夠被2整除</li>
    <li> <b>E{display!=none}</b> css 的“display”屬性不等于“none”</li>
</ul>
</DIV>
<h2>輸出裝飾</h2>
<h3>DomHelper</H3>
<p>DomHelper（下簡稱DH）是專用于動態生成裝飾元素的實用工具，已解決大多數瀏覽器之間差別的問題，避免了原始操作DOM腳本的麻煩。對于HTML片斷與innerHTML的操作，DH經充分考慮并在性能有足夠的優化。</P>
<p>Ext.DomHelper是一個單例，因此無須實例化即可調用其靜態方法。</P>
<dl>
  <dt>markup 
  <dd>和過時的createHtml一樣 
  <dt>insertHtml 
  <dd>
  <dt>insertBefore 
  <dd>
  <dt>insertAfter 
  <dd>
  <dt>insertFirst 
  <dd>
  <dt>append 
  <dd>
  <dt>overwrite 
  <dd></DD></DL>DOM腳本編程： <pre>var myEl = document.createElement('a');
myEl.href = 'http://www.yahoo.com/';
myEl.innerHTML = 'My Link';
myEl.setAttribute('target', '_blank');

var myDiv = document.createElement('div');
myDiv.id = 'my-div';

myDiv.appendChild(myEl);
document.body.appendChild(myDiv);
</PRE>Ext.DomHelper： <pre>Ext.DomHelper.append(document.body, {
    id: 'my-div',
    cn: [{
    	tag: 'a', 
    	href: 'http://www.yahoo.com/', 
    	html: 'My Link', 
    	target: '_blank'
    }]
});
</PRE>
<h3>DomHelper配置項</H3>
<p>DomHelper是根據DomHelper 配置項未決定生成在頁面上的HTML，這DomHelper配置可視作任何HTML元素的等價物。</P>
Markup: <pre>&lt;a href=<span class=string>"http://www.extjs.com"</SPAN>&gt;Ext JS&lt;/a&gt;</PRE>DomHelper配置項： 
<pre>{
    tag: <span class=string>'a'</SPAN>,
    href: <span class=string>'http://www.extjs.com'</SPAN>,
    html: <span class=string>'Ext JS'</SPAN>
}</PRE>
<h3>模板</H3>
<p>Tpl模板、格式化函數，from的靜態方法（對textarea有用）。 </P>
<h3>模板成員方法</H3>
<p>添加和執行成員格式化函數。 </P>
<h2>關于JS的加強語法</H2>
<p>Javascript是一門靈活的語言。以它靈活性，其中一項表現為，JavaScript基礎對象可以讓程序員自由地綁定函數在其身上。為什么會這樣做？基礎對象是與這些所屬的方法（函數）有密切聯系的，開放給大家定義其關系的。不過這樣的方法有許多，不大有可能一一實作出來，有些瀏覽器有，有些沒有，但就開放出來這種修改的權利給程序員。當同時使用多個JavaScript庫時，他們可能有各自的實現，但如果同名的方法、屬性就犯大忌了，這種重疊將引入庫與庫之間的沖突……基于這種狀況，Ext謹慎處理加入到基礎對象的方法數量。這里是一份有關于各框架、庫“入侵/污染”問題的調查報告：<a href="http://mankz.com/code/GlobalCheck.htm" 
target=_blank>Framework Scanner</A>。</P>
<div class=sect id=function-augmentation>
<h3>函數</h3>
<p>下列函數已經加入了Function的prototoype對象中。（請注意createSequence與createInterceptor<b>沒有</b>被加入。）：</P>
<ul>
            <!-- Begin createCallback -->
  <li><b>createCallback</B> 
  <div>為這個函數創建回調函數，回調函數已經是有一連串的參數定義好的了。當你打算指定一個函數作為回調函數的時候，指明其引用即可，如（如callback:myFn）。然而，當打算給函數傳入參數的時候，但卻希望其返回的是一個Function類型的，就應使用該方法。因為callback: myFn(arg1, arg2)不是返回函數而是該函數的返回值。要返回函數類型，使用createCallback對函數“加殼”，如下例：<br>
    <pre>var sayHello = function(firstName, lastName){
    alert('Hello ' + firstName + ' ' + lastName);
};
Ext.get(<span class=string>'myButton'</SPAN>).on(<span class=string>'click'</SPAN>, sayHello.createCallback(<span class=string>'John'</SPAN>, <span class=string>'Smith'</SPAN>);

</PRE></DIV>
            <!-- End createCallback -->
            <!-- Begin createDelegate -->
  <li><b>createDelegate</B> 
  <div>與createCallback有點相似，但略為強大。它不但可允許你指定函數的作用域，而且能夠控制送入函數的參數其數目。第一個參數是作用域。第二個參數是送入的參數，可以是多個，也就是參數數組。第三個參數是怎么控制調用者執行時期送入的參數。如果該參數為true，將args加載到該函數的后面，如果該參數為數字類型，則args將插入到所指定的位置。<br>
  <pre>var sayHello = function(firstName, lastName, e){
    alert('Hello ' + firstName + ' ' + lastName);
};
Ext.get(<span class=string>'myButton'</SPAN>).on(
   <span class=string>'click'</SPAN>, 
   sayHello.createDelegate(this, [<span class=string>'John'</SPAN>, <span class=string>'Smith'</SPAN>], 
   <string class=comment>//0這里說明我們打算把我們參數插入到最前的位置</STRING>
   0
); 
</PRE>
  </DIV>
            <!-- End createDelegate -->
            <!-- Begin defer -->
  <li><b>defer</B> 
  <div>延遲調用該函數。第一個參數是延遲時間，以毫秒為單位；第二個是作用域的參數。<br>
  <br>
  <pre>var whatsTheTime = function(){
    alert(new Date());
};
whatsTheTime.defer(3000); <span class=comment>//執行之前等待三秒</SPAN></PRE>
  </DIV>
            <!-- End defer --></LI></UL>
<p></P></DIV>
<div class=sect id=array-augmentation>
<h3>數組</h3>
<p>下面的這些方法加入到Array的prototype對象中，瀏覽器有實現的話就不用加：</P>
<ul>
            <!-- Begin indexOf -->
  <li><b>indexOf</B> 
  <div>檢查對象是否存在于當前數組中。不存在則返回-1。<br 
  >
  <br>
  <pre>var idx = [1, 2, 3, 4, 5].indexOf(3); <span class=comment>// 返回2。</SPAN>

</PRE>
  </DIV>
            <!-- End indexOf -->
            <!-- Begin remove -->
  <li><b>remove</B> 
  <div>刪除數組中指定對象。如果該對象不在數組中，則不進行操作。注意原數組會發生變化。<br 
  >
    <br>
    <pre>var arr = [1, 2, 3, 4];
arr.remove(2);
var len = arr.length; <span class=comment>// len是3了。</SPAN>
</PRE>
  </DIV>
            <!-- End remove --></LI></UL>
<p></P></DIV>
<div class=sect id=string-augmentation>
<h3>字符串</h3>
<p>String類只有一個format的方法加入，注意這或者會與Ajax.NET相沖突。</P>
<ul>
            <!-- Begin format -->
  <li><b>format</B> 
  <div>定義帶標記的字符串，并用傳入的字符替換標記。每個標記必須是唯一的，而且必須要像{0},{1}...{n}這樣地自增長。<br 
  >
    <br>
    <pre>var s = String.format(
   <span class=string>'Hey {0} {1}'</SPAN>，您好嗎？', 
   <span class=string>'張'</SPAN>, 
   <span class=string>'三'</SPAN>
);
<span class=comment>//{0}替換為 張，{1}替換為 三</SPAN>
</PRE>
  </DIV>
            <!-- End format --></LI></UL>
<h2>輔助函數</H2>
<h3>關于輔助函數</H3>
<p>Ext提供了增強Javascript與JSON若干方面的函數，功能上各自不一樣但目的都是為了更方便地程序員使用好前端設施。</P>
</DIV>
<div class=sect id=util-apply 
style="VISIBILITY: visible; BACKGROUND-COLOR: rgb(255,255,255)">
<h3>apply與applyIf</H3>
<ul>
                <!-- Begin apply -->
  <li><b>apply</B> 
  <div>復制一個JavaScript對象的所有屬性至obj，第一個參數為屬性接受方對象，第二個參數為屬性源對象。注意即使目的對象都有同名屬性，也會被覆蓋。<br>
  <pre>var person = {
    name: <span class=string>'John Smith'</SPAN>,
    age: 30
};

Ext.apply(person, {
    hobby: <span class=string>'Coding'</SPAN>,
    city: <span class=string>'London'</SPAN>

}); <span class=comment>// person對象也有hobby與city</SPAN>
</PRE>
  </DIV>
                <!-- End apply -->
                <!-- Begin applyIf -->
  <li><b>applyIf</B> 
  <div>與apply相類似。不同的是目的對象有同名屬性就會跳過，不會被覆蓋，以目標對象的屬性較為優先。<br 
  >
      <div>
          <pre>var person = {
    name: <span class=string>'John Smith'</SPAN>,
    age: 30,
    hobby: <span class=string>'Rock Band'</SPAN>
};

Ext.applyIf(person, {
    hobby: <span class=string>'Coding'</SPAN>,
    city: <span class=string>'London'</SPAN>
}); <span class=comment>// 不復制hobby</SPAN>
        </PRE>
      </DIV>
      <!-- End applyIf -->
  </DIV></LI>
  </UL>
<p></P></DIV>
<div class=sect id=util-urlencode>
<h3>Url Encoding/Decoding</H3>
<p>這些方法用于JSON數據的轉換，在GET的http通訊中經常被轉換為字符通訊等等的場景。</P>
<ul>
                <!-- Begin urlEncode -->
  <li><b>urlEncode</B> 
  <div>把一個對象轉換為一串以編碼的URL字符。例如Ext.urlEncode({foo: 1, bar: 2});變為&quot;foo=1&amp;bar=2&quot;。可選地，如果遇到屬性的類型是數組的話，那么該屬性對應的key就是每個數組元素的key，逐一進行“結對的”編碼。<br 
  >
  <pre>var params = {
    foo: <span class=string>'value1'</SPAN>,
    bar: 100
};

var s = Ext.encode(params); <span class=comment>// s形如foo=value1&amp;bar=100</SPAN>

</PRE>
  </DIV>
                <!-- End urlEncode -->
                <!-- Begin urlDecode -->
  <li><b>urlDecode</B> 
  <div>把一個已經encoded的URL字符串轉換為對象。如Ext.urlDecode(&quot;foo=1&amp;bar=2&quot;); 就是{foo: &quot;1&quot;, bar: &quot;2&quot;}。<br>
  <pre>var s = <span class=string>'foo=value1&amp;bar=100'</SPAN>;
var o = Ext.decode(s); <span class=comment>// o現在有兩個屬性，foo和bar。</SPAN>
alert(o.bar);</PRE>
  </DIV>
                <!-- End urlDecode --></LI></UL>
<p></P></DIV>
<div class=sect id=util-array>
<h3>數組</H3>
<p>Ext core有為JavaScript數組和其他類型的collections提供方法。</P>
<ul>
                <!-- Begin each -->
  <li><b>each</B> 
  <div> 迭代一個數組，包括Nodelists或CompositeElements，數組中每個成員都將調用一次所傳函數，直到函數返回false才停止執行。<br>
    <pre>Ext.each([1, 2, 3, 4, 5], function(num){
    alert(num);
});
</PRE></DIV>
                <!-- End each -->
                <!-- Begin toArray -->
  <li><b>toArray</B> 
  <div>將可以迭代的集合（collection）轉換為相當的JavaScript數組。<br 
  >
    <pre>var arr1 = Ext.toArray(1); <span class=comment>// arr1 = [1];</SPAN>
<span class=comment>// arr2 = Ext elements []</SPAN>
var arr2 = Ext.toArray(Ext.select('div)); 
</PRE>
  </DIV>
                <!-- End toArray --></LI></UL>
<p></P></DIV>
<div class=sect id=util-json>
<h3>JSON</H3>
<p>JSON表示Javascript Object Notation，常用于數據交換格式。類似于JavaScript的字面對象（object literals）。當與服務器交換數據的時候，就要轉換為原生的JavaScript形式。有以下兩種輔助方法。更多的資訊可參見<a 
href="http://json.org">json.org</A>。</P>
<ul>
                <!-- Begin encode -->
  <li><b>encode</B> 
  <div>對一個對象，數組，或是其它值編碼，轉換為適合外界使用的格式。<br>
  <br>
  <pre>var s = Ext.encode({
    foo: 1,
    bar: 2
}); <span class=comment>//s是<span class=string>'{foo=1,bar=2}'這樣。</SPAN></SPAN>
</PRE>
  </DIV>
                <!-- End encode -->
                <!-- Begin decode -->
  <li><b>decode</B> 
  <div>對應着encode,  decode是將JSON字符串解碼（解析）成為JavaScript對象。在接受Ajax響應的前期步驟中就會經常使用這個方法處理文本變為JavaScript對象。<br 
  >
  <br>
  <pre>var s = <span class=string>'{foo=1,bar=2}'</SPAN>;
var o = Ext.decode(s); //<span class=comment> o現在有兩個屬性，foo和bar。</SPAN></PRE>
  </DIV>
                <!-- End decode --></LI></UL>
<h3>瀏覽器與OS的判定</H3>
<p>Ext帶有一系列的瀏覽器判定的功能，以解決主流瀏覽器之間有差異的問題，在JavaScript與CSS方面都有判定技朮，也適應復雜的情境。</P>
<p>對瀏覽器的判定情況:</P>
<ul>
  <li class=list>Internet Explorer - Ext.isIE, Ext.isIE6, 
  Ext.isIE7, Ext.isIE8 
  <li class=list>Firefox - Ext.isGecko, Ext.isGecko2, 
  Ext.isGecko3 
  <li class=list>Opera - Ext.isOpera 
  <li class=list>Chrome - Ext.isChrome 
  <li class=list>Safari - Ext.isSafari, Ext.isSafari2, 
  Ext.isSafari3 
  <li class=list>WebKit - Ext.isWebKit 
  <li class=list>Operating Systems - Ext.isLinux, 
  Ext.isWindows, Ext.isMac </LI></UL><pre>if(Ext.isIE){
    // 執行該瀏覽器的專用代碼
}
</PRE>
<h3>CSS</H3>
<p>CSS也有類似的判定，不同的樣式會根據不同的操作環境適當添加到根元素和body上，目的是更方便地解決好瀏覽器怪辟問題。在strict模式環境中，樣式ext-strict就會加入到root，其余這些可適當地加入到body中去。</P>
<ul>
  <li>.ext-ie, .ext-ie6, .ext-ie7, .ext-ie8 
  <li>.ext-gecko, .ext-gecko2, .ext-gecko3 
  <li>.ext-opera 
  <li>.ext-safari 
  <li>.ext-chrome 
  <li>.ext-mac, .ext-linux </LI></UL><pre>/* 當這是strict mode模式而且是safari的環境中，字體便有變化。*/
.ext-strict .ext-safari .sample-item{
    font-size: 20px; 
}
</PRE>
<h3>類型判定</H3>
<p>JavaScript是一門弱類型語言，要搞清楚變量是什么類型自然很有必要。這方面，Ext有若干如下的方法：</P>
<ul>
        <!-- Begin isEmpty -->
  <li><b>isEmpty</B> 
  <p>如果傳入的值是null、undefined或空字符串，則返回true。</P><pre>alert(Ext.isEmpty(<span class=string>''</SPAN>));

</PRE>
        <!-- End isEmpty -->
        <!-- Begin isArray -->
  <li><b>isArray</B> 
  <p>返回true表名送入的對象是JavaScript的array類型對象，否則為false。</P><pre>alert(Ext.isArray([1, 2, 3]));
</PRE>
        <!-- End isArray -->
        <!-- Begin isObject -->
  <li><b>isObject</B> 
  <p>檢查傳入的值是否為對象。</P><pre>alert(Ext.isObject({}));
</PRE>
        <!-- End isObject -->
        <!-- Begin isFunction -->
  <li><b>isFunction</B> 
  <p>檢查傳入的值是否為函數。 </P><pre>alert(Ext.isFunction(function(){
}));
</PRE>
        <!-- End isFunction --></LI></UL>
<h3>雜項</H3><b>id</B> 
<p>返回一個獨一無二的標點符號，對Ext.id()的調用就是生成從未使用的新id，第一個參數是可選的，是對哪個元素去分配id，第二個參數是id的前綴。</P><pre>var s = Ext.id(null, 'prefix'); // 不指定元素
var s = Ext.id(Ext.get(document.body)); // 對元素分配id
</PRE>
<h2>時控代碼</H2>
<p>Task 
Runner是一個以特定時間為間隔然后執行函數的類。這對進行“拉（pull）”的操作是比較有用的，例如每30秒的間隔刷新內容（Ajax）。TaskMgr對象是TaslRunner的單例，這樣使用起這個Task 
Runner便很快了。</P><pre>var stop = false;
var task = {
    run: function(){
        if(!stop){
            alert(new Date());
        }else{
            runner.stop(task); // 有需要的話這里我們也能停止任務
        }
    },
    interval: 30000 // 每30秒一周期
};
var runner = new Ext.util.TaskRunner();
runner.start(task);

//使用TaskMgr
Ext.TaskMgr.start({
    run: function(){
    },
    interval: 1000
});
</PRE>
<p>DelayedTask就是提供一個快捷的方式達到“緩沖”某個函數執行的目的。調用它之后，那個函數就會等待某段時間過去以后才會被執行。在此等待的期間中，如果task方法再被調用，原來的調用計時就會被取消。因此每一周期內最好只調用task方法一次。譬如在用戶是否完成輸入的情景，這方法可適用：</P><pre>var task = new Ext.util.DelayedTask(function(){
     alert(Ext.getDom('myInputField').value.length);
 });
 // 調用函數之前等待500ms，如果用戶在500ms內按下其他的鍵，這就會等于作廢，重新開始500ms的計算。
 Ext.get('myInputField').on('keypress', function(){
     task.delay(500); 
 });</PRE>
<p>注意我們這里是為了指出DelayedTask的用途。登記事件的同時也能對addListener/on的配置項設置DelayedTask其參數的。</P>
<h2>類編程</H2>
<p>JavaScript本身是基于原型的，這與普通基于類的編程語言相比，在實現繼承的機制上有較大的出入。JavaScript中創建一個新類那便是修改了某個對象原型（prototype）的結果。Ext提供了許多簡化這方面工作的函數。有關不同繼承方案的討論可參考<a 
href="http://ajaxian.com/archives/comparison-of-javascript-inheritance-mechanisms-proposal">這里</A>。 </P>
<p>Ext支持以下類風格的編程行為：繼承擴展（extend），重寫（overrride）/直接覆蓋。這意味着開發者可以根據需求加入自己的行為，創建自己的類，或者修改某些函數讓其更加合適。</P>
<h3>extend與override</h3>
<p><b>extend</b></p>
<p>Ext.extend方法創建新一個類之定義。第一個參數是父類，第二個參數是屬性/函數的列表。第二個參數加入到對象的prototype中extend過后，Ext.extend還會產生一個superclass的引用，在第二個例子中有演示。 
</P><pre>Person = Ext.extend(Object, {
    constructor: function(first, last){
        this.firstName = first;
        this.lastName = last;
    },

    getName: function(){
        return this.firstName + ' ' + this.lastName;
    }
});

Developer = Ext.extend(Person, {
    getName: function(){
        if(this.isCoding){
            return 'Go Away!';
        }else{
            // 訪問父類的方法
            return Developer.superclass.getName.call(this); 
        }
    }
});

var p = new Person('John', 'Smith');
alert(p.getName());
</PRE>
<p><b>override</b></p>
<p>override方法也編輯、修改類的其中一種途徑，不過本方法不會創建一個新類，而是對現有類予以修改其行為，第一個參數是要覆蓋的類，第二個參數就是覆蓋列表。override方法實際是修改類prototype的屬性。</P><pre>// 我們已聲明的Person類
Ext.override(Person, {
    getName: function(){
        // 覆蓋了舊行為，這次last name排頭
        return this.lastName + ' ' + this.firstName; 
    }
});
</PRE>
<h3>Prototype共享時注意的問題</H3>
<p>當在類原型中的prototype放置某項成員時，即表示所有該類的實例都會使用該共享的prototype。除非您有特效的要求，否則不要在prototype的定義中放入非原始類型的成員（"primitive" 
types，像{}、[]數組，就屬非屬原始類型成員。**翻譯疑問：字符型，布字型，數值型不屬于"primitive"？？**）。 </P><pre>MyClass = Ext.extend(Object, {
    // 所有MyClass的實例都使用這{}，不會“按引用”復雜新一份出來。
    baseParams: {}, 
    
    foo: function(){
        this.baseParams.bar = 'baz';
    }
});

Ext.onReady(function(){

    var a = new MyClass();
    var b = new MyClass();
    
    a.foo();
    // a已影響b的baseParams 
    console.log(b.baseParams); 
});
</PRE>
<h3>單例（Singletons）</H3>
<p>單例另一種較常見的說法是“模塊設計模式”，如果某一個類靜態方法較多，或者該類只須要實例化一次，那么釆用單例的模式就很不錯了。JavaScript的單例模式中，我們常常會創建私有JavaScript變量或通過高明的閉包手法建立私有的方法，以一段程序入口的范例代碼就能說明多少問題。</P><pre>MyApp = function(){
    var data; //外部無法訪問data，這是的私有成員
    return {
        init: function(){
            // 初始化程序
        },
        
        getData: function(){
            return data;
        }
    };
}();
Ext.onReady(MyApp.init, MyApp);
</PRE>
<h3>Ext.util.Observable</H3>
<p><a href="http://en.wikipedia.org/wiki/Observer_pattern">觀察者（Observable，或訂閱者subscriber）模式</A>常用于對象間的解藕，方便清楚了解其它對象的狀態。觀察者使用事件的概念，當主題的狀態有所改變，那么主題就會是觸發事件。換言之，狀態一改變，主題轄下的訂閱者就會接收到通知。為達到如此的靈活性，實現解藕編的程模型，很多Ext類就從Observable繼承。創建一個自定義事件的類定很簡單：</P><pre>var MyClass = Ext.extend(Ext.util.Observable, {
    constructor: function(config){
        this.addEvents('datachanged'); // 聲明打算觸發的事件
        MyClass.constructor.call(this, config);
    },
    
    update: function(){
        // 執行數據更新
        // 對訂閱者送入我們指定的參數 
        // passed to the subscribers.
        this.fireEvent('datachanged', this, this.data.length); 
    }
});

// 進行事件的訂閱
var c = new MyClass();
c.on('datachanged', function(obj, num){
    // 數據變化事件的反應
});
</PRE>
<h3>命名空間（Namespaces）</h3>
<p>命名空間對組織代碼很方便，可在兩方面體現其益處：其一是用了命名空間，很大程度避免了全局空間被污染的問題，污染全局的成員終究不是一個好習慣，例如Ext對象本身就是在全局空間的一個對象。要養成一個良好的習慣，就要把寫好的類放進一個命名空間中，可以用你公司的名字或程序的名字決定命名；其二是有助規范好你的代碼，把相類似的或相依賴的類都放在同一個名命空間中，也方便向其它開發者指明代碼其意圖。</P><pre> // 兩種方式都是一樣的，后者的為佳。
Ext.namespace(
     'MyCompany', 
     'MyCompany.Application', 
     'MyCompany.Application.Reports'
);
Ext.namespace('MyCompany.Application.Reports');</PRE></BODY></HTML>
